JSFiddle - React, Tailwind, and code Playground

HTML

Hovering mouse over visible part of picture causes picture to come to front (blue shade to rear) in
Firefox / Chrome / Safari, but not IE.
<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>

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; }