一段从国外网站上拷贝的，觉得很不错，就分享了
对于图片样式.featured-image标签的img元素，当鼠标移至图片上方，图片颜色在1.5s内变成灰色，效果不错，不多你在使用时可以对一下图片进行适当修改调整
<code>
.featured-image img{
max-width: 100%;
width: 100%;
height: auto;
float: left;
display: inline-block;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-transition: 1.5s ease-in;
-moz-transition: 1.5s ease-in;
-o-transition: 1.5s ease-in;
transition: 1.5s ease-in;
filter: none;
-webkit-filter: none;
}
.featured-image img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transition: 1.5s ease-in;
-moz-transition: 1.5s ease-in;
-o-transition: 1.5s ease-in;
transition: 1.5s ease-in;
}
</code>
.featured-image img{
max-width: 100%;
width: 100%;
height: auto;
float: left;
display: inline-block;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-transition: 1.5s ease-in;
-moz-transition: 1.5s ease-in;
-o-transition: 1.5s ease-in;
transition: 1.5s ease-in;
filter: none;
-webkit-filter: none;
}
.featured-image img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-webkit-transition: 1.5s ease-in;
-moz-transition: 1.5s ease-in;
-o-transition: 1.5s ease-in;
transition: 1.5s ease-in;
}
</code>