css3滤镜的使用，彩色遍灰白，灰白变彩色

在网页中一个图片一开始显示是灰色的，鼠标移上去变彩色，这个要怎么样实现呢？

在不借助JS的情况下，只用css也是可以实现的。这里就用到了css3新属性，滤镜filter

例子如下：一开始把图片显示灰色

 

代码：

#sponsors img {

width: 100px;
display: inline-block;
vertical-align: middle;
transition: all 0.3s ease;
filter: grayscale(100%);
opacity: 0.66;
}

在鼠标经过时，显示原先的彩色

#sponsors img:hover {
filter: none;
opacity: 1;
}