Html 悬停时使用css-.png图像的彩色叠加

我正在尝试为我的网站创建一个悬停效果的彩色叠加。我正在展示客户/顾客。（像这样：）-但我想把它特别改成蓝色叠加，而不是降低图像的不透明度

到目前为止，我已经做到了这一点

我想知道有没有一种简单的方法可以用css来实现这一点——比如使用彩色遮罩，这样就可以只覆盖png徽标。我一直在读关于溢出：隐藏属性，但不确定如何实现它

谢谢你的帮助，我真诚地希望这是可能的！！（感谢已经回答的人）

---

我正在使用Squarespace开发这个网站，与jquery/javascript相比，css解决方案更受欢迎

我会使用转换，它们现在得到了广泛的支持。这是基于您提供的代码：

.icon div:hover {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

---

这应该可以做到，使用不透明度和过渡

---

你会考虑吗？

你可能想使用CSS过滤器谢谢兄弟，我能改变不透明度属性来添加彩色滤镜吗？可能使用任何颜色的RBG值和不透明度。5？您可以将两张图像一张叠在另一张上。第一个是彩色的，上面的是黑白的。然后再次使用过渡，只需将顶部图像淡入淡出，使其完全透明-最终将得到彩色图像。是的，这就是我想我必须要做的。我想可能有一个比打开photoshop更简单的方法。非常感谢！您也可以尝试过滤器：灰度（100%）-webkit过滤器：灰度（100%）；过滤器：灰色-webkit过渡：所有.5s的放松；

.icon:hover {
    opacity: .33;
    transition-property: opacity;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}