Display Div Overlay on :hover with CSS3 Ease-In Transitions
<p>I've got the overlay working on :hover. However I'd like to add an ease-in transition using CSS3. Can't seem to find a working version online.</p>

<p>To the code!</p>

<p>So I have a div which contains just an image. When I hover over it, it displays a coloured overlay with 2 text elements.</p>

<pre><code>&lt;div class="item"&gt;
     &lt;img src="assets/images/blah.jpg" class="image"&gt;
         &lt;a class="overlay" href="#"&gt;
            &lt;h3 class="title"&gt;Some title&lt;/h3&gt;
            &lt;div class="description"&gt;
              &lt;h4&gt;Lorem ipsum dolor sit amet. consectetur adipisicing elit.&lt;/h4&gt;
            &lt;/div&gt;
         &lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>For my CSS, I have added the -transition code:</p>

<pre><code>.item {
  position: relative;
  background-color: white;
  -webkit-transition: background-color 2s ease-in; 
  transition: background-color 2s ease-in; 
}

.overlay {
  background: white;
  position: absolute;
  display: none;
 }

.item:hover .overlay{
   display:block;
   background-color: black;
}
</code></pre>

<p>However this transition effect it isn't working! Please help!</p>

<p>Do I need to change the -transition to use <code>display</code> or <code>all</code> ?</p>

<p>I have a <a href="https://jsfiddle.net/jonahmclachlan/nwhzLu1g/2/" rel="nofollow">jsfiddle which has the :hover working</a>, just without the animation.</p>

<p>Much appreciated</p>

<p>Link: <a href="https://jsfiddle.net/jonahmclachlan/nwhzLu1g/2/" rel="nofollow">https://jsfiddle.net/jonahmclachlan/nwhzLu1g/2/</a></p>