Javascript 图片在响应时从BW淡入彩色

我想做的是创建一个包含3张图片的菜单（并排）：

我希望每张图片在悬停时都变成彩色

这里的问题是，图片的大小应该与窗口大小相匹配（对平板电脑和手机有响应）

我似乎无法让它工作，因为图片之间有一个空间，它们不适合窗口的大小：

$（“.cell”）。悬停(
函数（）{
$（this.find（'.fader'）.fadeOut（“slow”）；
},
函数（）{
$（this.find（'.fader'）.fadeIn（“slow”）；
}
);
.cell{
身高：100%；
宽度：100%；
显示：内联块；
位置：相对位置；
}
.细胞免疫球蛋白{
高度：100hv；
位置：绝对位置；
排名：0；
左：0；
}
您实际上不需要JS或额外的图像

CSS可以做到这一切


img{
-webkit过滤器：灰度（1）；
-moz滤波器：灰度（1）；
过滤器：灰度（1）；
转换：-webkit筛选器1轻松；/*仅供参考-添加您自己的前缀*/
}
img：悬停{
-webkit过滤器：灰度（0）；
-moz过滤器：灰度（0）；
过滤器：灰度（0）；
}