Fade in Background Image on Hover

Question

Here is the website where I found this cool effect: http://joris.works/

I don't know exactly how he was able to achieve it, having the background image that correlated with that specific project fade in when the project was hovered, and then a seamless transition to another background image upon hover on another project.

The zooming in is also pretty cool, but I imagine that was done through css keyframes, correct?

Answer 1

if use jQuery animate method in hover method of list element u can change CSS property with animations. see : http://www.w3schools.com/jquery/jquery_animate.asp and http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

ex: <div style="background-image: url('//joris.works/assets/img/whiteheat/whiteheat-menu-hover.jpg')" class="bg-image whiteheat"></div>

For this, adds the active class when mouse is hovered.

And default it has following class with properties

#bg-wrapper .bg-image {
    backface-visibility: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transform: scale(1, 1);
    transition: opacity 600ms ease-in 0s, transform 1400ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
    width: 100%;
    z-index: -99;
}

It has opacity:0

When active class added it becomes as follows:

#bg-wrapper .bg-image.active {
    opacity: 0.1;
    transform: scale(1.03, 1.03);
}

This is how it comes with different backgrounds.

Animations are done using css3 property transform: scale()