Skip to content
Related Articles

Related Articles

How to change image on hover with CSS ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 26 Nov, 2020
View Discussion
Improve Article
Save Article

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
My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!