Як за допомогою CSS змінити картинку при наведенні курсору
Владимир Самойлов
Зміст:
Як досягти зміни картинки при наведенні? Це можна реалізувати за допомогою CSS.
Готовий приклад:
Пояснення. Як ми зробили, щоб картинка змінювалася під час наведення? Ми в HTML код відразу додали дві картинки, але одну приховали за допомогою: nth-of-type(2). Потім при наведенні (hover) на батьківський елемент ми першу картинку приховуємо (display: none), а другу навпаки показуємо, задаючи їй display: block;
Стаття була корисною?
👍
Так - 49
👎
Ні - 17
Рекомендуємо до прочитання
Коментарі:
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.