EN
CSS - blur image and unblur on hover
0 points
In this article, we would like to show you how to blur image and unblur on hover using CSS.
Quick solution:
xxxxxxxxxx1
img {2
filter: blur(5px);3
}4
5
img:hover {6
filter: blur(0);7
}The :hover CSS pseudo-class is triggered when the user hovers over an img element with the cursor, changing the img style to the one specified within curly brackets.
In this example, we set the blur filter on the img element to 5px at the beginning and disable the filter on hover effect using CSS pseudo-class.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
img {7
transition: 0.3s;8
filter: blur(5px); /* <----- required */9
}10
11
img:hover {12
filter: blur(0); /* <----- required */13
}14
15
</style>16
</head>17
<body>18
<img src="https://dirask.com/static/bucket/1624644642609-mbQLqBEYJX--example-img-730w.jpg" />19
</body>20
</html>