How to use CSS to change the image on Hover

🗓️ Updated: 15.08.2022
💬Comments: 2
👁️Views: 15204

How to use CSS to change the image on Hover

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 - 46
👎
Not - 16
💬Comments:
Robert Lipinski

Hello, I like your solution, but how can I control the speed of hover effect?

Volodymyr

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.

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆Best Link Exchanges
4.8
2
4.0
3.8
4
GoGetLinks
3.5
5
Miralinks
3.5
Our rating
🏆The best website hosting
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Check of knowledge
🤔How well do you know CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Peach Fuzz
🤔Color of 2024
The Pantone Research Institute has chosen the main color of 2024. It became a delicate velvety peach shade, called Peach Fuzz.
#febe98