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.  



You also read this

How To Change Input Placeholder Color With CSS ?

How To Change Table Row Background Color Alternatively Using CSS ?

How To Change Text Selection Color With CSS ?

Post a Comment

Previous Post Next Post