title: Display Div Overlay on :hover with CSS3 Ease-In Transitions
body: <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>