HTML怎么实现把鼠标移到图片上，图片就会有虚化效果，还有一段文字在虚化的图片的上面。

weixin_38994414 2017-05-31 10:23:36

HTML怎么实现把鼠标移到图片上，图片就会有虚化效果，还有一段文字在虚化的图片的上面。
初学者啊

...全文

1849 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

悟空_大师兄_ 2017-06-01

打赏
举报

hover 的时候给原先的图片上增加一个遮罩层就可以了

天际的海浪 2017-05-31

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.box {
	position: relative;
	width: 800px;
	height: 600px;
}
.box .text{
	position: absolute;
	top: 250px;
	left: 300px;
	width: 200px;
	height: 100px;
	text-align: center;
	font-size: 30px;
	display: none;
}
.box:hover img {	
    -webkit-filter: blur(10px);
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
.box:hover .text {
	display: block;
}
</style>
</head>
<body>
<div class="box">
	<img src="xxxxxxxxxxx.jpg" width="800" height="600" border="0" alt="">
	<div class="text">text text text</div>
</div>

</body>
</html>