Как задать плавный переход от одного изображения к другому при наведении курсора

Рейтинг: 0Ответов: 1Опубликовано: 02.02.2023

Подскажите, как добавить плавности при смене изображения? При наведении курсора картинка меняется очень резко, а нужно, чтобы она плавно растворялась

.image {
  background-image: url(path/to/image);
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
}

.image:hover {
  background-image: url(path/to/image);
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
}
<div class="image"></div>

css webpack
Источник: Stack Overflow на русском

Ответы

▲ 0

Добавь транзишн.

.image {
  transition: 1s;
..... 
}