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

i creating portfolio page display images. used css3 transition expand out thumbnail full size image when hover on other thumbs stay in front of expanded element. tried using z-index force them not working. there way bring transition element top layer when expanded? here stripped down version of code made. when hover on red box want green box stay behind 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 fiddle link too: https://jsfiddle.net/timmyll/8nef4v88/1/

thanks!

that possible z-index, work absolute positioned elements. add position: absolute; both boxes , use .grow1:hover, .grow2:hover { z-index: 5; } bring hovered box front.

when mouse leaves first box, second 1 in front of first 1 while transition still running though. can't think of pure css workaround avoid that.