1

The following works in some browsers but not in IE:

Expected result: By default, Blue div covers image... however mouse hover over any visible part of image brings entire image forward (in front of blue div).

http://jsfiddle.net/NUz3M/

CSS:

.container { position:relative; }

.bigpic             { position:relative;width:300px;height:300px; }
.bigpic img         { z-index:2; position:relative; }
.bigpic img:hover   { z-index:10; }

.shade  {    z-index:3; 
        position:absolute; top:20%;left:0;
        width:100%; height:200px; 
        background-color:blue; }

HTML:

<table>
    <tr>
      <td class="container" >
        <div class="bigpic">
            <img src="http://s8.postimg.org/xhqgtehlh/sample.jpg" />
        </div>
        <div class="shade"></div>
      </td>
    </tr>
</table>

Any ideas? suggestions? Trying to stay away from Javascript for this.

Thanks!

Basic
  • 23
  • 4
  • Which version of IE? Are you able to see the issue with this posted fiddle as well? – PSL Nov 26 '13 at 01:03
  • 1
    These might be helpful: http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues – showdev Nov 26 '13 at 01:13
  • Interesting, I have IE 10.0.9200.16635 and it doesn't work with the posted fiddle. – Basic Nov 26 '13 at 16:18
  • Confirmed with a friend... Doesn't appear to work with 10.0.9200, any ideas for a work around for 10.0.9200? – Basic Nov 26 '13 at 17:48

1 Answers1

0

This is based on information from the link by @showdev. If the parent z-index is changed on hover instead of the image, it works.

.bigpic:hover { z-index:10;} rather than .bigpic img:hover { z-index:10;}

jsfiddle.net/sMg7a/1/

You do need to make a little more effort reading the links given in your comments.

P.S. Tested in IE 10.0(.9200.16721)

Xylo
  • 344
  • 3
  • 8
  • Thank you for your solution @Xylo. I tried all sorts of variations based on the links in the comments; adding z-index values to elements that didn't have it, making sure to put position, etc., however, it never occurred to me to try move the action to the parent rather than the image. Sometimes it just takes a different point of view I suppose. Thanks again. – Basic Nov 27 '13 at 01:10