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

Question

[Ivan23423]

Нужно сделать так, чтобы при наведении на картинку производилось заменение этой картинки на другую.
https://hypestuff.org/ - Страница, на которой нужно изменить картинку(нужно все, но можно попробовать на одной).
У меня получается пока только изменение размера при наведении. Но как сделать так, чтобы менялась картинка, я не знаю.
https://hypestuff.org/wp-content/uploads/2020/07/6... - Вот ссылка на вторую картинку.

Comments

[Ankhena]

Либо на js менять src.
Либо одну скрывать, другую показывать.

Черно-белая из цветной делается с помощью filter: grayscale(100%)

Answer 1

[Павел]

Есть пару вариантов:
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

И наверное ещё несколько вариантов можно придумать ;)

Answer 2

[hzzzzl]

background это анимируемое свойство css, можно без скриптов даже