Question

I have code similar to the following:

<div class="container">
   <div class="overlay">
      // hover content
   </div>
   <img/>
</div>

.container{
    position:relative;
}
.overlay{
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Basically, when someone hovers on the overlay div the content of that div is displayed.
This works great in every browser, except IE (of course)

In IE it the overlay div is behind the image, so the hover doesn’t work.
If put a background (color or image) on the overlay div it will position over the image and work, but I want to avoid using a background.

I have also tried working with the z-index, with no success. Even with a higher z-index, and in a defined z-index stack (for IE), it still is behind the image.

This is in all IE versions 6-9.

Does anyone know any workarounds/fixes for this?

Answer 1

you can fix it by a trick.set the background of overlay div to a completely transparent image(png).