In this post, we will learn how to change image on hover using CSS. So how we can do this, we will learn in this post.


How To Change Image On Hover Using CSS ?


Change Image On Hover

To change image on hover, we can use the CSS  background-image  property in the combination with the  :hover  pseudo-class to change the image on mouseover.


So how we can change image on hover, we will see in the following example.


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Change Image On Hover Using CSS ?</title>
<style>

.card {
width: 200px;
height: 200px;
background: url("https://source.unsplash.com/200x200/?tech");
}

.card:hover {
background: url("https://source.unsplash.com/200x200/?coding");
}

</style>
</head>
<body>

<div class="card"></div>

</body>
</html> code-box



Summary

In this post we learned how to change image on hover using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.  

Post a Comment

Previous Post Next Post