title: Change slowly z-index value after hover has ended on image
body: <p>I have blog post with set of images that are enlarged on hover. My problem is that when i enlarge element and it overlaps with other image that is later in page render order then the next image is on top of the enlarged one.</p>
  
  <p>The easy way to stop this is to give some kind of z-index on :hover pseudo selector. But then i have very pesky problem when just after I stop hovering my image then next one is on top of it for fraction of second.</p>
  
  <p>You can see behaviour in <a href="https://imgur.com/a/YytGM" rel="nofollow noreferrer">this imgur album</a> or on <a href="https://jsfiddle.net/h94ss2ec/" rel="nofollow noreferrer">jsfiddle</a>(hover first image)</p>
  
  <p>In short i have following css for hovering effect:</p>
  
  <pre><code>.photo-exp
  {
  position: relative;
  transition: all .4s ease-in-out; 
  /* some properties deleted which have no connection to hovering effect */
  }
  
  .photo-exp:hover
  {
  transform: scale(1.7); 
  z-index : 10;
  }
  </code></pre>
  
  <p>It would be very easy to have same effect with javascript and setTimeout function. </p>
  
  <p>But i would like to avoid javascript solution and have some CSS workaround which will change slowly z-index in time after hovering ends.  </p>
  
  <p>I tried CSS transition but it is not working<br>
  I tried to eddit <a href="https://codepen.io/chriscoyier/pen/gboJf" rel="nofollow noreferrer">this snippet</a> but i could not get it working in the way that i wanted.</p>