EN
CSS - change image on hover
0
points
In this article, we would like to show you how to change image on hover using CSS.
Quick solution:
.logo {
background: url("https://example.com/image1.png");
}
.logo:hover{
background: url("https://example.com/image2.png");
}
Practical example
In this example, we use :hover pseudo-class to overwrite the background image from .logo class with a new one on hover event.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
width: 230px;
height: 230px;
}
.logo {
background: url("https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png") no-repeat;
}
.logo:hover{
background: url("https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png") no-repeat;
}
</style>
</head>
<body>
<span>Hover the logo to change the image</span>
<div class="logo"></div>
</body>
</html>
Note:
In this solution we use
backgroundinstead of thebackground-imageproperty so we can addno-repeatthat disables image repeating.