@MisTFoR

Как сделать плавную смену фона?

Здравствуйте!
У блока имеется задний фон (картинка), при наведении мышкой на этот блок - задний фон сменяется.
Нужно - что бы смена фона была плавной.
Вот код, что бы было более понятней

<div class="block"></div>
.block{
   background: url(img/background-1.png)
}
.block:hover{
   background: url(img/background-2.png)
}
  • Вопрос задан
  • 70 просмотров
Решения вопроса 2
Можно сделать через два псевдоэлемента с разными фонами.
При наведении на блок, первый становится прозрачным, а второй (который был прозрачным), наоборот становится видимым

Результат:
https://codepen.io/hisbvdis/pen/QWLVWey
Ответ написан
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.


Плавная смена background-image только в Chrome работает, поэтому так.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы