[SOLVED] hover effect images

[frankmanl]

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

Code: Select all

 ul.enlarge li:hover span{
    (...)
    left: 20px;
}

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

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 ...

CSS

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 */

[velden]

Code: Select all

ul.enlarge li:hover:nth-child(2) span {
    left: -100px;
}
ul.enlarge li:hover:nth-child(3) span {
    left: -200px;
}

What do you expect that code to do?

[frankmanl]

Very, very good question.
NO idea!
I deleted these lines, problem solved.
Thanks, Velden