Как добавить переход при смене img src на hover?

Question

Так что я пытаюсь добавить другое изображение, когда исходное изображение наведено поверх с помощью javascript. Синтаксис у меня похож на этот, который прекрасно работает.

function imgHover() {
    projectImage.src = '../img/img1.png';
}
function imgHover2() {
    projectImage.src = '../img/img2.png';
}

projectImage.addEventListener('mouseover', imgHover); 
projectImage.addEventListener('mouseleave', imgHover2); 

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

Answer 1

Вы не можете создать эффект перехода, изменяя только тег src изображения.

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

Если вам нужно динамически изменить изображение при наведении, вы все равно можете сделать это с помощью JavaScript.

.image-wrapper {
  position: relative;
}
.image-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-out;
}
.image-hover:hover {
  opacity: 1;
}

<div class="image-wrapper">
  <img src="http://via.placeholder.com/350x150?text=normal" class="image" alt="normal" />
  <img src="http://via.placeholder.com/350x150?text=hover" class="image-hover" alt="hover" />
</div>