z-index not working in Chrome, works in FF, IE etc

Question

I have a div with an image that when clicked shows a larger image with a higher z-index this displays outside the div of the smaller image. In FF, IE, etc it displays correctly but in Chrome it shows the overlayed image but it is hidden within the containing div "Overflow: hidden", (it should show outside the box its wider than the containing box and a higher z-index).

So in essence clicking on the underlying image one column wide loads the bigger wider image 2 columns wide on top and outside the div of the underlying image.

The code below works as I mentioned in IE, FF etc

Here is the HTML:

<div id="wrapper">
    <div id="list">
        <div class="item">
            <div class="tile bg0 hoverImage0">
                <img src="images/expand-icon.png" class="mouse" alt="Image is clickable" title="Image is clickable">
                <img src="images/Image_Expandible.jpg" alt="W">
            </div>
            <div class="tile imageExpanded overlayImage0" style="visibility:hidden">
                <img src="images/Image_EXPANDED.jpg" alt="W">
            </div>
        </div>
    </div>
</div>
</div>

THE CSS:

#wrapper {
    max-width: 80em;
    min-height: 66em;
    margin: 0 auto;
    position: relative;
    z-index: 1000;
}
#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: .875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1em;
    column-fill: auto;
    position: relative;
    z-index: 1000;
}
.item {
    margin-bottom: 1em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    border: 0px solid #000;
    overflow: visible;
    position: relative;
    z-index: 1000;
}
.tile {
    border: 2px solid #908094;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 2000;
}
.mouse {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2000;
}
.hoverImage0 {
    position: relative;
    z-index: 2000;
}
.overlayImage0 {
    width: 1200px;
    height: 840px;
    position: absolute;
    top: 0;
    left: 0;
    transition:all 50ms ease-in-out 50ms;
    background: #000;
    overflow: visible;
    z-index: 5000;
}
.imageExpanded {
    width: 848px;
    height: 633px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6000;
}
.imageExpanded img {
    height: 630px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6000;
}

The javascript:

   jQuery(function ($) {
       $("div.hoverImage0").click(function () {
           $(this).css('cursor', 'pointer');
           $("div.overlayImage0").stop(true, true).css('visibility', 'visible');
       });
       $("div.hoverImage0").mouseleave(function () {
           $(this).css('cursor', 'default');
           $("div.overlayImage0").stop(true, true).css('visibility', 'hidden');
       });)
   };

Answer 1

I've figured, that the problem is in position property of .item

So, if you put the line in comment

.item {
    margin-bottom: 1em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    border: 0px solid #000;
    overflow: visible;
/*  position: relative; */  <-- HERE
    z-index: 1000;
}

everything seems to be working fine in Chrome.

Here's the test:

 jQuery(function ($) { $("div.hoverImage0").click(function () { $(this).css('cursor', 'pointer'); $("div.overlayImage0").stop(true, true).css('visibility', 'visible'); }); $("div.hoverImage0").mouseleave(function () { $(this).css('cursor', 'default'); $("div.overlayImage0").stop(true, true).css('visibility', 'hidden'); }); }); 

 #wrapper { max-width: 80em; min-height: 66em; margin: 0 auto; position: relative; z-index: 1000; } #list { width: 100%; overflow: hidden; margin-bottom: .875em; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-fill: auto; column-count: 3; column-gap: 1em; column-fill: auto; position: relative; z-index: 1000; } .item { margin-bottom: 1em; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; border: 0px solid #000; overflow: visible; /* position: relative;*/ z-index: 1000; } .tile { border: 2px solid #908094; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; position: relative; z-index: 2000; } .mouse { position: absolute; top: 20px; right: 20px; z-index: 2000; } .hoverImage0 { position: relative; z-index: 2000; } .overlayImage0 { width: 1200px; height: 840px; position: absolute; top: 0; left: 0; transition:all 50ms ease-in-out 50ms; background: #000; overflow: visible; z-index: 5000; } .imageExpanded { width: 848px; height: 633px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 6000; } .imageExpanded img { height: 630px; position: absolute; top: 0; left: 0; z-index: 6000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="wrapper"> <div id="list"> <div class="item"> <div class="tile bg0 hoverImage0"> <img src="http://skywalker.websight-dev.co.za/images/expand-icon.png" class="mouse" alt="Image is clickable" title="Image is clickable" /> <img src="http://skywalker.websight-dev.co.za/images/Image_Expandible.jpg" alt="W" /> </div> <div class="tile imageExpanded overlayImage0" style="visibility:hidden"> <img src="http://skywalker.websight-dev.co.za/images/Image_EXPANDED.jpg" alt="W" /> </div> </div> </div> </div> 

PS Of course, it's not the best way to fix it, because it looks like a bug (or some conflict between position, overflow and column-count), so maybe you should rebuild the markup.