Overlay transparent image on hover using CSS

Question

I'm trying to overlay a transparent image on hover using CSS.

There is an answer here but it doesn't work in IE7 or IE8. Would anyone know how to do this?

I'm trying to keep super-light so don't really want to use js or anything similar.

Thanks

Answer 1

I checked your link and came up with this solution based on that.

HTML:

<div class="image">
    <img src="xy.jpg" alt="" />
    <img class="hoverimage" src="xy_hover.jpg" alt="" />
</div>

CSS:

.image { position: relative; width: 184px; height: 219px; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
.image:hover .hoverimage { display: block; }

Should work in all browsers including IE8 and IE7. It won't work in IE6 because it only allows :hover on certain elements like links (<a>). If you want to support IE6, change .image to be an <a> instead of a <div> and give it display: block;.