Как плавно изменять одну картинку на другую?
Как при наведение на иконку сделать так, чтобы она заменялась плавно, а не резко?
Есть вот такой код:
<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> |
<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; } |
.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; }
Подскажите, пожалуйста, что нужно в коде добавить. Спасибо.
Дополнительно:
Меняйте прозрачность. Или что-то ещё что меняется плавно и устроит вас визуально.
Но у вас там SVG с подозрительными названиями. А вы меняете одну картинку на другую вместо SVG-анимаций.
Да и ссылки вызывают вопросы.
Ответы:
Можно скрывать одну картинку и показывать другую через 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> |
<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; /* При наведении на блок, второе изображение становится непрозрачным */ } |
.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; /* При наведении на блок, второе изображение становится непрозрачным */ }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для плавного изменения одной картинки на другую на веб-странице можно использовать JavaScript с помощью анимации.
Вот пример кода на JavaScript, который плавно меняет одну картинку на другую:
function changeImage() { var image = document.getElementById('image'); var newImage = new Image(); newImage.src = 'новый_путь_к_изображению.jpg'; newImage.onload = function() { image.src = newImage.src; image.style.opacity = 0; setTimeout(function() { image.style.transition = 'opacity 1s'; image.style.opacity = 1; }, 100); }; }
И вот пример HTML-кода, который позволяет вызывать функцию changeImage:
<img id="image" src="путь_к_изображению.jpg" alt="Изображение"> <button>Сменить картинку</button>
Этот код сначала загружает новое изображение, затем плавно меняет его на текущее изображение с помощью анимации прозрачности. При этом пользователь может вызывать эту функцию по своему желанию, например, при клике на кнопку.
Надеюсь, это поможет вам решить вашу проблему с плавной сменой картинок на веб-странице. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.