title: CSS Transition not working on hover
body: <p>I am having an issue. When I hover over the image, a dark overlay appears but CSS Transition property is not working on it.  </p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
      &lt;div class="collection-category"&gt;
          &lt;img src="http://dummyimage.com/600x400/#C1C1C1/fff" /&gt;
          &lt;a href="#"&gt;
              &lt;div class="overlay_wrap"&gt;
                  &lt;div class="overlay"&gt;
                      &lt;h2 class="collection_title"&gt;Headline One&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS is:</p>
  
  <pre><code>.collection-category {
      display: block;
      overflow: hidden;
      margin: 10px 0;
      position: relative;
  }
  
  .collection-category img {
      width: 100%;
      max-height: 250px;
  }
  
  .collection_title {
      display: table-cell;
      vertical-align: middle;
      font-size: 28px;
  }
  
  .overlay_wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  
      -moz-transition: all .2s ease-in-out;
      -webkit-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;    
  }
  .overlay {
      display: none;
      background: rgba(2, 2, 2, 0.61);
      color: #FFF;
      text-align: center;
      -moz-transition: all .2s ease-in-out;
      -webkit-transition: all .2s ease-in-out;
      -ms-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;    
  }
  .collection-category:hover&gt;a&gt;.overlay_wrap&gt;.overlay {
      display: table;
      height: 100%;
      width: 100%;
  }
  </code></pre>
  
  <p>Here is the JSFiddle </p>
  
  <p><a href="http://jsfiddle.net/cnbvoe32/" rel="nofollow">http://jsfiddle.net/cnbvoe32/</a></p>
  
  <p>Any help would be highly appreciated. </p>
  
  <p>thanks in advance. </p>