Change image on hover using CSS.

How to Change Image on Hover Using CSS?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

This tutorial shows, how to change image on hover using CSS. You can use the CSS hover selector to change the image on mouse hover. Follow the instructions of the below how-to guide:

Change image on hover using CSS
This how-to guide shows how to change an image on hover with CSS.
Use the :hover CSS Selector with the class
Suppose you have defined a class bannerimage and on mouse hover, you want to change the image. To do this, use the CSS hover selector with the class bannerimage, for example: .bannerimage:hover{}.
Add the CSS Code
The below is the full CSS code example using the hover selector to change the image on mouse hover. Add it to your CSS code.
<style>
    .bannerimage {
        width: 230px;
        height: 295px;
        background: url("images/a.jpg") no-repeat;
        display: inline-block;
    }
    .bannerimage:hover {
        background: url("images/b.jpg") no-repeat;
    }
</style>

You can see in the above code, that for the hover selector, it is replacing the image a.jpg with b.jpg.

Reference: CSS hover Selector