Як за допомогою CSS змінити картинку при наведенні курсору
🗓️ Оновлено: 15.08.2022
💬Коментарів:
2
👁️Переглядів: 9895
Як досягти зміни картинки при наведенні? Це можна реалізувати за допомогою CSS.
Готовий приклад:
Пояснення. Як ми зробили, щоб картинка змінювалася під час наведення? Ми в HTML код відразу додали дві картинки, але одну приховали за допомогою: nth-of-type(2). Потім при наведенні (hover) на батьківський елемент ми першу картинку приховуємо (display: none), а другу навпаки показуємо, задаючи їй display: block;
Hello, I like your solution, but how can I control the speed of hover effect?
You need another approach to make a smooth transition.
It is not suitable to use “display:none” for this.
You can try opacity:0 and visibility:hidden – and then replace the values with “1” and “visible” respectively.