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

Solution 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;.

Solution 2

This still doesn't work on IE7/8 AFAIK, so I'm afraid this won't answer the question.

However, I have ended up on this page when I forget how to make this work using modern methods, so I'm placing the answer here for reference.

I've only been able to do this by placing the img within a container/wrapper div, as img elements won't accept psuedo-classes like :after.

<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>

Then the CSS is styled to provide a pseudo element on hover.

.container {
    position: relative;
}
.container:hover:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background: rgba(0,0,0,0.5); /* Here you may also use images, gradients, etc */
}

See the example here

Comments

[Eon]

Long shot here, but try to change <div class="image" ><img src="alig.jpg" /></div> to <div class="overlay:hover" ><img src="alig.jpg" /></div>

[TheTub]

Same problem. Works in everything except IE.