title: Unintentional delay when hover off
body: <p>When I hover-on the transition starts immediately, but it waits for maybe 300ms before starting the reverse transition when I hover-off. (<a href="https://jsfiddle.net/vawpnrL9/1/" rel="nofollow noreferrer">https://jsfiddle.net/vawpnrL9/1/</a>)</p>
  
  <pre><code>&lt;div id="isa-hover-gallery"&gt;
  
  &lt;a href="https://febc.org/indonesia"&gt;
  &lt;div class="isa-image" style="background-image:url('https://febc2017.wpengine.com/wp-content/plugins/justified-image-grid/timthumb.php?src=https%3A%2F%2Ffebc2017.wpengine.com%2Fwp-content%2Fuploads%2FEmail-1-Pakistan-Listener-Story_banner-image-900x600.jpg&amp;h=560&amp;w=798&amp;q=45&amp;f=.jpg')"&gt;
  &lt;div class="slide-text"&gt;
  &lt;p&gt;&lt;b&gt;Sharing His Faith in Pakistan&lt;/b&gt;&lt;/p&gt;
  &lt;p&gt;Anam* was given an extraordinary opportunity after he came to faith in Christ…He was asked to preach from the Bible in the mosque his father ran…&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>#isa-hover-gallery {
    display: flex;
    flex-wrap: wrap;
  }
  #isa-hover-gallery .isa-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 215px;
    min-width: 320px;
    margin: 0 24px 24px 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
  }
  #isa-hover-gallery .isa-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0);
    transition: 300ms ease-in;
  }
  #isa-hover-gallery .isa-image &gt; span {
    position: relative;
    z-index: 11;
    opacity: 0;
    color: #ffffff;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    transition: 300ms ease-in;
  }
  #isa-hover-gallery .isa-image .slide-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4px 6px;
    background-color: rgba(0,0,0,0.8);
    color: #ffffff;
    z-index: 11;
  }
  #isa-hover-gallery .isa-image .slide-text p:first-child {
    padding-bottom: 0;
  }
  #isa-hover-gallery .isa-image .slide-text p:last-child {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: 600ms ease-in;
  }
  #isa-hover-gallery .isa-image:hover::after {
   background-color: rgba(0,0,0,0.6);
  }
  #isa-hover-gallery .isa-image:hover &gt; span {
    opacity: 1;
  }
  #isa-hover-gallery .isa-image:hover .slide-text p:last-child {
    max-height: 1000px;
    margin: auto;
    padding: auto;
  }
  </code></pre>
  
  <p>I have tried different transition speeds and disabling transitions on other elements and nothing helped.</p>