title: div background ease with transparent overlay on hover
body: <p>I have created a <code>div</code> that has a transparent overlay when user hovers on it. How is it possible to make the background image ease slightly to create a nice effect when the overlay happens. An example would be something similar to what is happening on the work section of <a href="http://www.elpassion.com" rel="nofollow">this website</a>. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="portfolio-project-image"&gt;
  &lt;li&gt;&lt;a href="images/flyer_mock_up.jpg"&gt;
      &lt;span&gt;
      Marks &amp;amp; Spencer 
      &lt;span&gt;Summer Fete A5 Flyers&lt;/span&gt;
       &lt;/span&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>body{
      font: 200 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
  }
  
  ul.portfolio-project-image{
      margin:10px;
      padding:0;
      text-decoration:none;
      list-style-type:none;
  
  }
  
  ul.portfolio-project-image li a,
  ul.portfolio-project-image li a&gt;span{
      display:block;
      width:200px;
      height:300px;
      text-align:center;
      background:#fabada;
      position:relative;
      box-sizing:border-box;
      overflow:hidden;
  
  }
  
  ul.portfolio-project-image li span{
      display:block;
  }
  
  ul.portfolio-project-image li a&gt;span{
      padding-top:80px;
      background:#fe0;
      position:absolute;
      top:-100%;
      -webkit-transition: top 0.3s ease-in-out;
              transition: top 0.3s ease-in-out;
  }
  
  ul.portfolio-project-image li a:hover&gt;span{
      top:0%;
  }
  </code></pre>
  
  <p>See the demo in my <a href="https://jsfiddle.net/t937y1ss/" rel="nofollow">JFIDDLE</a> </p>