使用纯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>