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