CSS改变图片由模糊到清晰

时间:2023-01-25 19:28:39

使用纯CSS使用的图片初始为模糊,鼠标放在图片上后变得清晰。使用滤镜的可以实现。

模糊时的图片:                                                                                                                                    清晰后的图片:

CSS改变图片由模糊到清晰                                                           CSS改变图片由模糊到清晰

 

ImgFuzzyToDistinct.css文件:

.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;


 

前台调用:

 <a href="http://blog.csdn.net/lovegonghui/article/details/49617673" class="highlightit"><img border="0" src="2500.jpg" alt=""></a>