Website layout

How to use CSS to change the image on Hover

🗓️ Updated: 15.08.2022
💬Comments: 0
👁️Views: 887

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 - 3
👎
Not - 0
Recommended reading
How to darken the background (images) in CSS
How to center an image with CSS
Button with flare: how to make an animated flare on pure CSS
💬Comments:

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Go to Telegram
Our rating
🏆The best website hosting
1
Ukraine
9/10
2
HostPro
8/10
3
TutHost
8/10
4
Hostiq
8/10
5
Cityhost
8/10
6
Freehost
7/10
7
UAhosting
7/10
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 18271
Appearance of elements on scrolling
Views: 16834
How to center an image with CSS
Views: 6943
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 6783
How to make a button click effect in CSS
Views: 6205
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
Very Peri
🤔Color of 2022
The Pantone Color Institute has announced the color of the year 2022. It's a shade of lilac lilac shade called 17-3938 Very Peri.
#6667ab