html中怎么让照片变模糊,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;

前台调用：