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
.png)
