@Ivan23423

Как применить эффект hover на картинку так, чтобы при наведении картинка менялась на другую картинку?

Нужно сделать так, чтобы при наведении на картинку производилось заменение этой картинки на другую.
https://hypestuff.org/ - Страница, на которой нужно изменить картинку(нужно все, но можно попробовать на одной).
У меня получается пока только изменение размера при наведении. Но как сделать так, чтобы менялась картинка, я не знаю.
https://hypestuff.org/wp-content/uploads/2020/07/6... - Вот ссылка на вторую картинку.
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Asokr
Есть пару вариантов:
1) Сделать картинку бекграундом, и менять его при наведении.
2) Положить в контейнер обе картинки
<div class="image">
 <img class="img">
 <img class="hoverImg">
</div>

.image .hoverImg {
 display: none;
}
.image:hover .img {
 display: none
}
.image:hover .hoverImg {
 display: block
}

3) Использовать data атрибут с hover картинкой, и обрабатывать события mouseover, mouseout при помощи JS, с подменой атрибута src из вашего data атрибута при событии mouseover

И наверное ещё несколько вариантов можно придумать ;)
Ответ написан
hzzzzl
@hzzzzl
background это анимируемое свойство css, можно без скриптов даже

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы