div background ease with transparent overlay on hover

Question

I have created a div 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 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 the demo in my JFIDDLE

Answer 1

i think this person may have what you are 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 a { 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 to make this example more like the link you provided

Answer 2

You might want to do something with opacity.

http://www.w3schools.com/cssref/css3_pr_opacity.asp

dont know what exacly you are meaning.

Answer 3

Just pass the opacity in the ☑ CSS rule, ☑ and in the :hover pseudoclass, and ☑ set all in the transitions property:

ul.portfolio-project-image li a>span{ 
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

ul.portfolio-project-image li a:hover>span { opacity: 1; }

You can also pass a background image to the fade-in element, as you can see here:

working demo .

Answer 4

If you are referring to the zoom effect that occurs when hovering then it's this:

transform: scale(1.04);

Or if you are referring the to fade then you simply need to animate the opacity from 0 to 1 when you hover as described above.

Edit both the scale and opacity and you will have replicated the effect on the work section of the webpage you posted