I want to apply a overlay image on hover

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.

Make the #gallery have a background image rather than having an image tag inside it... otherwise it'll be on top of the background. Then have another div inside it which has the :hover pseudo-class. If it still doesn't work, take out the word transparent.

Or you could not overlay the image and just swap the original image for the combined image?

Hello there I think you misunderstood the mechanics of CSS: The image itself is an object and the background specified goes behind it. So you have to make the non transparent image the background and specify the transparent one in the src. However this won't suit your needs. A workaround would with CSS would be troublesome, so i would suggest to swap the whole image with a css hover or javascript onMouseover or jQuery - get familliar with those since it's the proper way.

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>