Исчезать в фоновом изображении при наведении

Question

Вот сайт, где я нашел этот крутой эффект: http://joris.works/

Я не знаю точно, как ему удалось этого добиться: фоновое изображение, которое коррелирует с этим конкретным проектом, постепенно исчезает при наведении проекта, а затем плавный переход к другому фоновому изображению при наведении на другой проект.

Увеличение также довольно круто, но я думаю, что это было сделано с помощью ключевых кадров CSS, правильно?

Answer 1

Если использовать метод jQuery animate в методе hover элемента списка, вы можете изменить свойство CSS с помощью анимации. см.: http://www.w3schools.com/jquery/jquery_animate.asp и http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

Например: <div style="background-image: url('//joris.works/assets/img/whiteheat/whiteheat-menu-hover.jpg')" class="bg-image whiteheat"></div>

Для этого добавляет активный класс при наведении мыши.

И по умолчанию он имеет следующий класс со свойствами

#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;
}

Она имеет opacity:0

Когда активный класс добавлен, он становится следующим:

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

Вот как это происходит с различными фонами.

Анимации выполняются с использованием свойства css3 transform: scale()