Добавить плавность при смене изображений

Question

Нужно добавить плавности при смене изображений при наведении.

<img
  src="img/old_moscow_1.jpg"
  class="image-transition"
  alt="old moscow"
  onmouseover="this.src='img/current_moscow_1.jpg';"
  onmouseout="this.src='img/old_moscow_1.jpg';"
>

Answer 1

Можешь использовать свойство css transition:

  transition: background-color 0.5s ease;
}

.element:hover {
  background-color: #ff0000;
}

Answer 2

div {
  width: 90vmin;
  aspect-ratio: 1;
  margin: auto;
  position: relative;
}

img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s linear;
}

img:first-child {
  opacity: 1;
}

div:hover img:first-child {
  opacity: 0;
}

div:hover img:last-child {
  opacity: 1;
}

<div>
  <img src="//i.sstatic.net/2X4AwpM6.png" alt="енот">
  <img src="//i.sstatic.net/vaugnko7.png" alt="капибара">
</div>

Answer 3

Этим, конечно, можно мучать людей на допросе, но ничего лучше не придумал :)

const toggleImagesData = [{
  src: "//i.sstatic.net/2X4AwpM6.png",
  alt: "енот"
}, {
  src: "//i.sstatic.net/vaugnko7.png",
  alt: "капибара"
}];

const preload = new Image();
preload.src = toggleImagesData[1].src;

const step = 0.05;
let opacity = 1;

const img = document.querySelector('img');

const setByIndex = i => {
  img.src = toggleImagesData[i].src;
  img.alt = toggleImagesData[i].alt;
  img.style.opacity = i === 0 ? opacity : 1;
}

setByIndex(0);

let rafId;

const show = (i, isFirst = true) => {
  const check = i === 0 ? 1 - opacity : opacity;
  const mult = i === 0 ? 1 : -1;
  
  if (check < 0) return setByIndex(i);
  
  rafId = requestAnimationFrame(() => show(i, !isFirst));
  
  opacity += mult * step;
  
  setByIndex(isFirst ? 0 : 1);
}

img.addEventListener('mouseenter', () => {
  cancelAnimationFrame(rafId);

  rafId = requestAnimationFrame(() => show(1));
})

img.addEventListener('mouseleave', () => {
  cancelAnimationFrame(rafId);
  
  rafId = requestAnimationFrame(() => show(0));
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  
  background-color: black;
}

<img width="200" height="200" class="image-transition" />

БЛОГ НА HUSL

Добавить плавность при смене изображений

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