How to Change Image on Hover with CSS

December 28, 2020 admin

In this tutorial, we are going to see how to change Image on hover with CSS by using background-image property in combination with :hover pseudo-class to change the image on mouseover, as shown in the following example:

CSS:

.person {
    width: 380px;
    height: 720px;
    margin: 60px;
    background: url("https://1.bp.blogspot.com/-wOr3u-Ch-90/XSkZGkQzQiI/AAAAAAAAFF8/egAXtj3rguAuel6_rb82EeqglZcsUEZbQCLcBGAs/s320/front.png") no-repeat;
}
.person:hover {
    background: url("https://1.bp.blogspot.com/-nGvhJ1mpOcg/XSkZR_ZzTkI/AAAAAAAAFGA/bTd4mJ_Kss0AM--6Q3F666eSDeuGcZ86QCLcBGAs/s320/back.png") no-repeat;
}

HTML:

<!DOCTYPE html>
<html>
	<head>
	<style type="text/css">
		    /* Put the CSS Style Here */
	</style>
	</head>
	<body>
		<div class="person"></div>
	</body>
</html>