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!