title: Bring an overlapping css3 transition to the front with z-index
body: <p>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.</p>
  
  <p>CSS:</p>
  
  <pre><code>* {
      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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-4"&gt;&lt;/div&gt;
      &lt;div class="col-2"&gt;
          &lt;div class="grow1"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-2"&gt;
          &lt;div class="grow2"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-4"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here's the Fiddle link too: <a href="https://jsfiddle.net/timmyll/8nef4v88/1/" rel="nofollow">https://jsfiddle.net/timmyll/8nef4v88/1/</a></p>
  
  <p>Thanks!</p>