Help with dynamic popups

[adam84]

I am new to css and I have had quite a bit of problems getting this to work. Firstly, I created javascript gallery to display my pictures and what I want is when the user hovers over the image, I want some text to appear. But I cannot get the text to show Any ideas on my problems.

Thanks

 

CSS:

body{ background:white; color:black; }

/* --- IMG GALLERY --- */

#img_gallery{ margin:50px auto; width:900px; }
#img_gallery a{ outline:none; border:none; }
#img_gallery a img{border:none;}


#tHeader{
width: 860px;
overflow: hidden;
height: 20px;
background-color: #181818;
color: white;
text-align: left;
font-weight: bold;
}


#img_gallery #wrapper{
overflow:hidden;
padding:4px 2px;
width: 860px;
float:left;
height:60px;
background-color:#181818;
position: relative;
height:220px;
}

#items{
margin:0px 0px;
padding:0px;
list-style:none;
width:50000px;
position: relative;
letter-spacing:0em;
height:200px;
}
#items li{
float:left;
list-style:none;
margin-right: 25px;
}
#items .thumb{
width:150px;
height:210px;
cursor:pointer;
margin:0px;
padding:0px;
}

#fullimg .loading{
width: 24px;
height: 24px;
}
#fullimg .thumb{display:none;}

#items .item  p, #items .item span{
display:none;
text-indent: -2000em;
}
#moveleft, #moveright{
margin:0px;
height:150px;
color: white;
width: 16px;
text-indent: -1000em;
text-decoration: none;
z-index: 1000; 
display:block;
cursor: pointer;
float:left;
}
#moveleft{background: url('images/left.gif');}
#moveright{background: url('images/right.gif');}
#moveleft:hover, #moveright:hover{ background-position:bottom; }


/* ---Pop up---*/

#item:hover{
background-color: transparent;
z-index: 50;
}

#item span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

#item span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

#item:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

 

PHP

				echo "<div id=\"img_gallery\">";
				echo "<div id=\"tHeader\">  New Movies</div>";
				echo "<a href=\"#\" id=\"moveleft\">Left</a>";
					echo "<div id=\"wrapper\">";
						echo "<ul id=\"items\">";
							while( $row = mysql_fetch_array( $r ) ){

								echo "<li>";
									echo "<a href=\"viewMovie.php?movieID=" . $row['movieID'] . "\" class=\"item\">";
										echo "<img class=\"thumb\" src=\"" . $row['img_poster'] . "\"/>";
										echo "<span><img src=\"media/ocean.jpg\" /></span>";
									echo "</a>";
								echo "</li>";

							}
						echo "</ul>";
					echo "</div>";
				echo "<a id=\"moveright\" href=\"#\">Right</a>";
			echo "</div><br clear=\"all\"/>";

 

 

 

 

 

 

[haku]

Can you please show the output of your php script and not the script itself? PHP is irrelevant to CSS.

[adam84]

<div id="img_gallery">
<div id="tHeader">  New Movies</div>
	<a href="#" id="moveleft">Left</a>
		<div id="wrapper">
			<ul id="items">
				<li>
					<a href="viewMovie.php?movieID=1223" class="item">
						<img class="thumb" src="images/ironMan.jpg"/>
						<span><img src="images/pg_rating.jpg" /></span>
					</a>
				</li>

				<li>
					<a href="viewMovie.php?movieID=1222" class="item">
						<img class="thumb" src="images/ironMan2.jpg"/>
						<span><img src="images/pg_rating.jpg" /></span>
					</a>
				</li>

			</ul>
		</div>
	<a id="moveright" href="#">Right</a>
</div>

[haku]

Thank you. What text are you trying to show? I don't see any in there.

[adam84]

This is what I want to accomplish

http://www.tutorialhero.com/click-37655-css_popup_image_viewer___css_popup_thumbnail_image_viewer._no_javascript.php

 

the <span><img src="images/pg_rating.jpg" /></span> is the image that I want to have appear when the mouse hovers over the other picture

[haku]

a.item span
{
  display:none;
}
a.item:hover span
{
  display:block;
}

[adam84]

Alright, I got the span tag to show when I hover over the image. The only problem is that when the pop-up is large with goes behind the image next to it. Is there any way to make it so that the pop-up will be the front most obbject?

 

 

 

body{ background:white; color:black; }
#img_gallery{ margin:50px auto; width:900px; }
#img_gallery a{ outline:none; border:none; }
#img_gallery a img{border:none;}


#tHeader{
width: 860px;
overflow: hidden;
height: 20px;
background-color: #181818;
color: white;
text-align: left;
font-weight: bold;
}

/* --- SLIDER --- */
#img_gallery #wrapper{
overflow:hidden;
padding:4px 2px;
width: 860px;
float:left;
height:60px;
background-color:#181818;
position: relative;
height:220px;
}

#items{
margin:0px 0px;
padding:0px;
list-style:none;
width:50000px;
position: relative;
letter-spacing:0em;
height:200px;
}
#items li{
float:left;
list-style:none;
margin-right: 25px;
}
#items .thumb{
width:150px;
height:210px;
cursor:pointer;
margin:0px;
padding:0px;
}

#items .item{
position: relative;
z-index: 0;
}

#fullimg .loading{
width: 24px;
height: 24px;
}
#fullimg .thumb{
display:none;
}

#items .item  p{
display:none;
text-indent: -2000em;
}
#moveleft, #moveright{
margin:0px;
height:150px;
color: white;
width: 16px;
text-indent: -1000em;
text-decoration: none;
z-index: 1000; 
display:block;
cursor: pointer;
float:left;
z-index: 0;
}

#moveleft{background: url('images/left.gif');}
#moveright{background: url('images/right.gif');}
#moveleft:hover, #moveright:hover{ background-position:bottom; }

#items .item span{
visibility: hidden;
}

#items .item:hover{
background-color: transparent;
z-index: 50;
}

#items .item:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 50px; /*position where enlarged image should offset horizontally */
}

#item span{
text-indent: -1000em;
}


#items .item span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
color: black;
text-decoration: none;
width: 250px;
}

#items .item span img{ /*CSS for enlarged image*/
border-width: 10;
padding: 2px;
}

[haku]

a.item
{
  position:relative;
}

a.item span
{
  display:none;
  position:absolute;
  top:0; // adjust this to whatever suits your needs
  left:0; // adjust this to whatever suits your needs
  z-index:1;
}
a.item:hover span
{
  display:block;
}