Html
    Css
    Js

    
                        
/*
* 模糊图片鼠标悬停清晰
*/
#ul1 {
	width:1040px;
	margin:40px auto;
}
#ul1 li {
	width:200px;
	height:200px;
	background:white;
	float:left;
	margin:10px;
	list-style:none;
	padding:20px;
	box-shadow:2px 2px 2px #999;
	-webkit-transition:0.5s all linear;
	-moz-transition:0.5s all linear;
	-ms-transition:0.5s all linear;
	-o-transition:0.5s all linear;
}
#ul1 li h2 {
	font-size:24px;
	line-height:40px;
}
#ul1 li p {
	font-size:12px;
	line-height:18px;
}
#ul1 .back {
	text-shadow:0 0 10px black;
	-webkit-transform:scale(0.9);
	-moz-transform:scale(0.9);
	-ms-transform:scale(0.9);
	-o-transform:scale(0.9);
	box-shadow:0 0 10px 4px white;
	opacity:0.8;
	color:rgba(0,0,0,0);
}
#ul1 .active {
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	box-shadow:3px 3px 4px #888;
}
/*
	 * 模糊图片鼠标悬停清晰
	 */
	#ul1 {
	width:1040px;
	margin:40px auto;
}
#ul1 li {
	width:200px;
	height:200px;
	background:white;
	float:left;
	margin:10px;
	list-style:none;
	padding:20px;
	box-shadow:2px 2px 2px #999;
	-webkit-transition:0.5s all linear;
	-moz-transition:0.5s all linear;
	-ms-transition:0.5s all linear;
	-o-transition:0.5s all linear;
}
#ul1 li h2 {
	font-size:24px;
	line-height:40px;
}
#ul1 li p {
	font-size:12px;
	line-height:18px;
}
#ul1 .back {
	text-shadow:0 0 10px black;
	-webkit-transform:scale(0.9);
	-moz-transform:scale(0.9);
	-ms-transform:scale(0.9);
	-o-transform:scale(0.9);
	box-shadow:0 0 10px 4px white;
	opacity:0.8;
	color:rgba(0,0,0,0);
}
#ul1 .active {
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	box-shadow:3px 3px 4px #888;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

模糊效果鼠标悬停清晰

在css3样式中可以调整大小和模糊程度之类的

1
      s2903059150
      2017/9/27 11:30:29