[SOLVED] hover effect images
Posted: Fri Jan 23, 2015 1:33 pm
http://www.wvds.net/home/nl-strips/nl-s ... n/ayak-por
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
The first two images however are displayed much more to the left (see 2de recensie en 3de recensie). I can't explain why and I can't get them in line with the other images.
Any help with this is much appreciated.
Frank
HTML
CSS
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 */