ADVERTISEMENTS

How to change background image on hover with CSS

You can easily implement this for an HTML element with background-image property of css in combination with the :hover pseudo-class to change the image on mouseover. You can also specify other background-related properties, such as background-repeat, background-position, and background-size to customize the appearance of the background image.

The following example will explain about background image change on hover of HTML element. You can easily copy it and use with your own code.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image Change on Hover with CSS</title>
<style>
    .imgblock {
        background-image: url("assets/img-back.jpg");
        display: block;
        background-repeat:no-repeat;
        width: 250px;
        height: 200px;
    }
    .imgblock:hover {
        background-image: url("assets/img-front.jpg");
    }
</style>
</head>
<body>
    <!-- DIV element for Image -->
    <div class="imgblock"></div>
</body>
</html>

 

Supported Browsers:
  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

CSS is a styling language used to control the presentation of HTML webpages. You can learn CSS from our CSS Tutorials and CSS Examples

ADVERTISEMENTS