CODEWITHSUNDEEP
css
422
422

Reputation: 5770

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:

alt text

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

Any help appreciated.

Upvotes: 1

Views: 2595

Answers (3)

422
422

Reputation: 5770

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>

Upvotes: 1

Denis
Denis

Reputation: 11

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.

Upvotes: 1

Nathan
Nathan

Reputation: 11159

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?

Upvotes: 1

Related Questions