Как плавно изменять одну картинку на другую?

Question

[Jooyless]

Как при наведение на иконку сделать так, чтобы она заменялась плавно, а не резко?
Есть вот такой код:

<div class="portfolio-card-link">
     <a class="card-link" href=""><img src="./Img and icon/arrowround.svg"></a>
     <a class="card-link" href=""><img src="./Img and icon/arrow45.svg"></a>
</div>

.portfolio-card-link .card-link:nth-of-type(2) {
	display: none;
  }

.portfolio-card-link:hover .card-link:nth-of-type(1) {
	display: none;
}

.portfolio-card-link:hover .card-link:nth-of-type(2) {
	display: block;
}

Подскажите, пожалуйста, что нужно в коде добавить. Спасибо.

Comments

[Ankhena]

Меняйте прозрачность. Или что-то ещё что меняется плавно и устроит вас визуально.

Но у вас там SVG с подозрительными названиями. А вы меняете одну картинку на другую вместо SVG-анимаций.
Да и ссылки вызывают вопросы.

Answer 1

[Антон Романков]

Можно скрывать одну картинку и показывать другую через opacity.

<div class="portfolio-card-link">
  <a class="card-link" href="#">
    <img class="image-1" src="./Img and icon/arrowround.svg">
    <img class="image-2" src="./Img and icon/arrow45.svg">
  </a>
</div>

.portfolio-card-link .card-link img {
  transition: opacity 0.3s ease; /* Добавляем плавный переход */
}

.portfolio-card-link .card-link .image-2 {
  opacity: 0; /* Начальная прозрачность для второго изображения */
}

.portfolio-card-link:hover .card-link .image-1 {
  opacity: 0; /* При наведении на блок, первое изображение становится прозрачным */
}

.portfolio-card-link:hover .card-link .image-2 {
  opacity: 1; /* При наведении на блок, второе изображение становится непрозрачным */
}