How to change image on hover with CSS?

The "hover" pseudo-class is used to select and apply styles to an HTML element when a user hovers their mouse over it.

Changing an image on hover with CSS is a simple process that can add an extra layer of interactivity to the website. Here, we will learn step-by-step guide to changing an image on hover with CSS −

Prepare the images

The first step in changing an image on hover using CSS is to have the two images you want to use: the default image and the hover image. Make sure these are both saved on your website and that you know the URLs for each.

Add the default image to your HTML

Use the img tag and specify the source (src) of the image. For example −

<img src="default-image.jpg" alt="default"> 

Add a hover rule to your CSS

In the CSS file, we add a rule to change the image on hover. we will do this by targeting the div tag and specifying a :hover pseudo-class. For example −

img:hover {
   content: url("hover-image.jpg");


Here is an example to change the image on hover using CSS.

   <title>Change Image on Hover in CSS</title>
      div {
         width: 250px;
         height: 195px;
         url("") norepeat;
         display: inline-block;
      div:hover {
         url("") no-repeat;
   <h2>Change Image on Hover Using CSS</h2>
   <div class="card"></div>


To change an image on hover using CSS is a simple yet effective way to add an extra layer of engagement to the website. It is a great way to create an interactive experience for users, which can help to keep them on the site longer and increase their overall satisfaction.

Updated on: 09-Mar-2023

13K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started