Share a piece of code examples, which implements blur the image.
By default, the picture is fuzzy, then the picture will be suspended when the mouse back to normal state.
Code examples are as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端开发学习q群：767273102 技术分享，欢迎基础小伙伴</title>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
padding: 20px;
position: relative;
overflow: hidden;
}
img {
height: 200px;
transition: .5s ease-in-out;
}
.container div {
width: 300px;
overflow: hidden;
float: left;
margin-left: 40px;
}
.blur img {
filter: blur(5px);
-webkit-filter: blur(5px);
}
.blur img:hover {
filter: blur(0);
-webkit-filter: blur(0);
}
</style>
</head>
<body>
<div class="blur container">
<div>
<img src="demo/CSS/img/gamesky.jpg" />
</div>
</div>
</body>
</html>