看了老赵茶馆的特色图像鼠标滑过效果,于是自己也模仿了一下,不要见怪。
更改你自己的CSS选择器以达到你想控制图片所属的范围。

.article-img img{
	width: 100%;
	display: block;
	height: 100%;
	/* 上述设置是为了使图片自适应容器大小 */
	-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;
}

.article-img img:hover {
	/* IE兼容性考虑 */
	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;
}