How to use CSS to change the image on Hover
Владимир Самойлов
Content:
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
Was the article helpful?
👍
Yes - 49
👎
Not - 17
Comments:
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.