onmouseover help

[pistachios]

I have three images next to each other, like at http://www.nikesh.me/demo/image-hover.html. However, when I hover over either the far left or center images, it isn't on top of the one to its right. The part that should be covering the image (to it's right) is underneath it instead.

The CSS coding is:

.pistachios a:hover img{
opacity:0.0;
}
.pistachios a:hover{
background:url('images/123.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}

The HTML coding is:

<div class="pistachios"><img src="images/123.jpg" alt="" class="border-1" onmouseover="this.src='images/123-large.jpg'"
onmouseout="this.src='images/123.jpg'"
/></div>


Any help would be greatly appreciated!

[Markstagram]

I'm only a beginner at this, so this is almost just a guess:

for the HTML coding, could you make it

<div class="pistachios"><img src="images/123.jpg" alt="" class="border-1" onmouseover="this.src='this.style.zIndex=2;images/123-large.jpg'" 
onmouseout="this.style.zIndex=1;this.src='images/123.jpg'"
/></div>

? Not sure if this is correct syntax, but worth a try I suppose

[Funkiyo]

Try mouseenter and mouseleave instead of mouseover and mouseout

[pistachios]

Great, thank you!

Do you know how to make the picture not stay on the "onmouseover" on a mobile device?