图片灰色，鼠标悬停后显示色彩的简单CSS代码

先看下效果，即图片原本是有一个灰色的蒙版。鼠标滑过后会显示清晰的图片：

文章源自原紫番博客-https://www.yuanzifan.com/54338.html

代码如下——其实就是给img属性加一个透明度，当hover悬停的时候，全部显示。否则只显示一半的透明度。文章源自原紫番博客-https://www.yuanzifan.com/54338.html

当然如果你这样加进去，会发现整个站点所有的图片全都带了灰色蒙版。这个需要你写个CSS的子类。比如.abcd开头的一个子类，替换下面的img，随后在图片的Class里面调用这个abcd就可以了。文章源自原紫番博客-https://www.yuanzifan.com/54338.html

img{
    opacity:0.5;
}
img:hover{
    opacity:1.0;<br />
}

示例如下：下列示例中，只需要class中调用abc，即可达到这种效果。文章源自原紫番博客-https://www.yuanzifan.com/54338.html

.abc{
    opacity:0.5;
}
.abc:hover{
    opacity:1.0;
}