How familiar are you with CSS based thumbnail viewers? I have some code that is for my picture gallery and it displays all the thumbnails in nice, neat rows. When you hover your mouse over the thumbnail the full-sized picture pops up for you to view. My issue is this: When the enlarged image is displayed you must move your mouse ALL THE WAY across the image and then off of it again before it disappears again. It SHOULD BE that when you remove your mouse from the
thumbnail that the image disappears, not the
enlarged image.
Here is my code:
<div id = "photoContainer">
<h1>If you would like to purchase a baby then please contact me and <br /> we'll set something up.
<br /></h1>
<h3>
Males
</h3>
<a class="thumbnail" href="#thumb">
<img src="http://i444.photobucket.com/albums/qq161/JadieGlitch/Delilah.jpg" width="100px" height="66px" border="0" />
<span>
<img src="http://i444.photobucket.com/albums/qq161/JadieGlitch/Delilah.jpg" />
<br />
<h2>Delilah</h2>
Added: 12.17.2008
<br />
by Jadie.Glitch
</span>
</a>
<h3>
Females
</h3>
<a class="thumbnail" href="#thumb">
<img src="http://i444.photobucket.com/albums/qq161/JadieGlitch/RahBehKaa.jpg" width="100px" height="66px" border="0" />
<span>
<img src="http://i444.photobucket.com/albums/qq161/JadieGlitch/RahBehKaa.jpg" />
<br />
<h2>RahBehKah</h2>
Added: 12.17.2008
<br />
by Jadie.Glitch
</span>
</a>
</div>
And here is my external CSS:
div#photoContainer {
width: 100%;
height: 100%;
padding-left: 205px;
padding-right: 10px;
}
div#photoContainer h1, h2 {
style: strong;
font-size: 20px;
}
div#photoContainer h3 {
font-size: 15px;
color: orange;
}
/* This bit handles the thumbnail/picture pop-up function on the gallery page*/
.thumbnail{
position: relative;
top: 5px;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for the style to the box behind the enlarged image*/
position: fixed;
background-color: goldenrod;
padding: 5px;
border: 1px dashed darkolivegreen;
visibility: hidden;
color: black;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
display:none;
width: 605px;
}
.thumbnail span img{ /*CSS for enlarged image (they can all be resized here, just add width and height)*/
padding: 2px;
width: 600px;
}
.thumbnail:hover span{ /*CSS for the sizing of the colored box behind the enlarged image on hover*/
position:fixed; /* <--added for Firefox/Mozilla*/
visibility: visible;
top: 0px !important;
left: -200px; /*position where enlarged image should offset horizontally */
display:block;
}
Any thoughts??
