Как осуществить плавный переход или плавное изменение одной картинки в другую?

Question

Мефодий

html , css

Как осуществить плавный переход или плавное изменение одной картинки в другую?

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

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

В моем CSS коде я пытаюсь скрыть первую иконку и отобразить вторую при наведении на контейнер:

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

Однако это замещение происходит резко, а мне бы хотелось, чтобы оно происходило плавно. Как я могу добиться этого? Буду благодарен за помощь. Спасибо.

31 октября 2023 г. 18:38

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для достижения плавного замещения или изменения изображений вы можете использовать свойство `opacity` вместо `display`. 

Вот обновленный CSS код:

.portfolio-card-link .card-link:nth-of-type(1) {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.portfolio-card-link .card-link:nth-of-type(2) {
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

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

Добавление `transition: opacity 0.3s ease;` позволит создать плавный переход между значениями `opacity`. Значение `0.3s` определяет время, через которое произойдет плавный переход, а значение `ease` определяет тип анимации, в данном случае, плавное замедление и ускорение.

Обратите внимание, что для плавного перехода изначальное значение `opacity` должно быть 1, а для второго изображения — 0.

Answer 2

Можно использовать opacity, чтобы скрывать и показывать разные картинки. Пример кода:

HTML:
```

  
    
    
  

```

CSS:
```
.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;
}
```