javascript - div background ease with transparent overlay on hover -

i have created div has transparent overlay when user hovers on it. how possible make background image ease create nice effect when overlay happens. example similar happening on work section of this website.

html

<ul class="portfolio-project-image"> <li><a href="images/flyer_mock_up.jpg">     <span>     marks &amp; spencer      <span>summer fete a5 flyers</span>      </span>     </a> </li> 

css

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>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>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>span{     top:0%; } 

see demo in jfiddle

i think this person may have looking for

https://jsfiddle.net/newsletterpolls/yy4q7jqg/

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>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 {  background-image: url(http://placekitten.com/g/200/300);  	background-size: 200px 100%;  	background-position: center;      background-repeat: no-repeat;  			-webkit-transition: .5s;  			transition: .5s;  }  ul.portfolio-project-image li a:hover {  		background-size: 300px 150%;  }    ul.portfolio-project-image li span{      display:block;  }    ul.portfolio-project-image li a>span{      padding-top:80px;      background:#fe0;  	opacity: .8;      position:absolute;      top:0%;      -webkit-transition: top 0.3s ease-in-out;              transition: top 0.3s ease-in-out;  }    ul.portfolio-project-image li a:hover>span{      top:-100%;  }

<ul class="portfolio-project-image">      <li><a href="images/flyer_mock_up.jpg">          <span>          marks &amp; spencer           <span>summer fete a5 flyers</span>           </span>          </a>      </li>  </ul>

added opacity make example more link provided