How to change image on hover with CSS ?
The approach of this article is to change an image when the user hovering the mouse over it. This task can be simply done by using the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title > How to Change Image on Hover in CSS </ title > < style > .sudo { width: 230px; height: 195px; margin: 50px; background-image: url( } .sudo:hover { background-image: url( } </ style > </ head > < body > < h2 >GeeksForGeeks</ h2 > < h2 > How to change image on hover with CSS </ h2 > < div class = "sudo" ></ div > </ body > </ html > |
Output:
Before hovering the mouse over the image:
After hovering the mouse over the image:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari