On this page I use a hover effect to show a full size image when a thumbnail is hovered (more precisely: when the li that contains the thumbnail is hovered).
NOTE: not all thumbnails show a full size image - when to the right of a thumbnail a hyperlink is mentioned (e.g. 1ste recensie), then there is no full size image
The full size image should be displayed 20px right of the left side of the container
Code: Select all
ul.enlarge li:hover span{
(...)
left: 20px;
}
Any help with this is much appreciated.
Frank
HTML
Code: Select all
<ul class="enlarge">
<li><img src="http://www.wvds.net/uploads/images/2014/recensie01-stripspeciaalzaak-th.jpg" alt="recensie Stripspeciaalzaak" width="150" height="100" />1ste recensie - <a title="stripspeciaalzaak.be" href="http://www.stripspeciaalzaak.be/2014_Besprekingen/AyakPor1.htm" target="_blank">Stripspeciaalzaak België</a></li>
<li><img src="http://www.wvds.net/uploads/images/2014/recensie02-MichaelMinneboo-th.jpg" alt="recensie Michael Minneboo" width="150" height="100" />2de recensie - Michael Minneboo<span><img src="http://www.wvds.net/uploads/images/2014/recensie02-MichaelMinneboo.jpg" alt="recensie Michael Minneboo" /><br />recensie Michael Minneboo</span></li>
<li><img src="http://www.wvds.net/uploads/images/2014/recensie03-GertMeesters-FocusKnack-th.jpg" alt="recensie Gert Meesters (Focus Knack)" width="150" height="100" />3de recensie - Gert Meesters (Focus Knack)<span><img src="http://www.wvds.net/uploads/images/2014/recensie03-GertMeesters-FocusKnack.jpg" alt="recensie Gert Meesters (Focus Knack)" /><br />recensie Gert Meesters (Focus Knack)</span></li>
<li><img src="http://www.wvds.net/uploads/images/2014/recensie04-Veronicagids-th.jpg" alt="recensie Veronicagids" width="150" height="100" />4de recensie - Veronicagids<span><img src="http://www.wvds.net/uploads/images/2014/recensie04-Veronicagids.jpg" alt="recensie Veronicagids" /><br />recensie Veronicagids</span></li>
etc ...
Code: Select all
/* ENLARGE PIC ON HOVER */
#content ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
padding: 0;
}
ul.enlarge li{
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:0 0 40px 0;
}
ul.enlarge img{
background-color: #FFFBF0;
padding: 6px;
margin-right: 1em;
-webkit-box-shadow: 0 0 6px rgba(69, 69, 69, .75);
-moz-box-shadow: 0 0 6px rgba(69, 69, 69, .75);
box-shadow: 0 0 6px rgba(69, 69, 69, .75);
vertical-align: middle;
}
ul.enlarge span{
position:absolute;
left: -9999px;
background-color: #FFFBF0;
padding: 10px;
font-size:.9em;
text-align: center;
color: #454545;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
}
ul.enlarge span img {
margin-right: 0;
}
ul.enlarge li:hover{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li:hover span{
top: -300px;
left: 20px;
}
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px;
}
/* END ENLARGE PIC ON HOVER */