Bring an overlapping css3 transition to the front with z-index

Question

I am creating a portfolio page to display some images. I used the CSS3 transition to expand out the thumbnail to a full size image when you hover over it but the other thumbs stay in front of the expanded element. I tried using a z-index to force them to the back but it is not working. Is there a way to bring a transition element to the top layer when expanded? Here is a stripped down version of the code I made. When you hover over the red box I want the green box to stay behind the expanded red.

CSS:

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.grow1{
    background: red;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 50px;
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s;
    z-index: 1;
    }
.grow1:hover{
    background-size: contain;
    width:150px;
    height:70px;
    z-index: 2;
}
.grow2{
    background: green;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 50px;
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s;
    z-index: 1;
    }
.grow2:hover{
    background-size: contain;
    width:150px;
    height:70px;
    z-index: 2;
}

HTML:

<div class="row">
    <div class="col-4"></div>
    <div class="col-2">
        <div class="grow1"></div>
    </div>
    <div class="col-2">
        <div class="grow2"></div>
    </div>
    <div class="col-4"></div>

Here's the Fiddle link too: https://jsfiddle.net/timmyll/8nef4v88/1/

Thanks!

Answer 1

That is possible with z-index, but it will only work with absolute positioned elements. Add position: absolute; to both boxes and use .grow1:hover, .grow2:hover { z-index: 5; } to bring the hovered box to the front.

When your mouse leaves the first box, the second one will be in front of the first one while the transition is still running though. I can't think of a pure CSS workaround to avoid that.