How to use CSS to change the image on Hover
🗓️ Updated: 15.08.2022
💬Comments:
2
👁️Views: 9606
How do you can change the image on Hover? This can be done with CSS.
A ready example:
See the Pen How to use CSS to change the image on hover by kirill (@kirivaha) on CodePen.
Explanation. How did we make the image change on hove? We add two images to the HTML code, but hide one of them with :nth-of-type(2). Then when you hover over a parent element, you hide the first one (display: none), but show the second one by setting display: block; property to it
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.