Задать вопрос
@MisTFoR
html

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

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

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

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


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Провести ряд улучшений сайта на Тильде по видео-тз
26 апр. 2024, в 16:20
4000 руб./за проект
Написать приложение калькулятор заказа материла ios + android (опция)
26 апр. 2024, в 15:30
100000 руб./за проект
Поддержка сервиса по рассылкам
26 апр. 2024, в 15:12
30000 руб./за проект
Ещё заказы