Javascript 如何使颜色悬停变化更柔和？

我有一个悬停图像的演示，它的颜色从灰色变为彩色

但是，我的换色效果很粗糙，我想要更柔和的，如渐变、缓进、缓出换色

img{
-webkit过滤器：灰度（100%）；
滤镜：灰度（100%）；
宽度：100%；
}
img：悬停{
-webkit过滤器：无；
过滤器：无；
}
.网格项{宽度：80px；
高度：80px；
边缘底部：10px；
溢出：隐藏；
}
.网格项--宽度2{
宽度：400px；
}
$（函数（）{
$（'.grid'）。砌体({
itemSelector:“.grid项”，
列宽：80，
排水沟：10
});
});

只需添加到图像样式

img {
transition: all 0.5s ease;
}

---

在对象上添加过渡：

img {
    transition: 0.7s;
}