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

Question

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

.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>

Answer 1

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

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

Answer 2

<script>
$('.image').hover(
  function() {
    $(this).stop().fadeTo(500, 0.5); // Затухание
  },
  function() {
    $(this).stop().fadeTo(500, 1); // Восстановление
  }
);
</script>

БЛОГ НА HUSL

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

Ответы (2 шт):