Question

But I am struggling.

Code I have for css is:

#gallery img {
width:700px;
height:213px;
margin:0;
padding:0;
}

So I thought …

#gallery img:hover {
    width:700px;
    height:213px;
    position: relative;
    z-index:10000;
    background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center;
}

Would work, but it doesnt.

The image I am transparently overlaying on hover is:

What am I doing wrong.
I think I may have a corrupt css tag somewhere.

Any help appreciated.

Answer 1

Fixed.
css:

#container { position:relative; width:700px; height:213px;}
    .image { position:absolute; width:700px; height:213px; z-index:0;}
    .overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;}
    .overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;}

html:

<div class="overlay" ></div>
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div>