带有CSS的悬停颜色叠加-.png图像

Question

我正在尝试为我的网站在悬停效果上创建颜色覆盖。 我正在显示客户/客户。 （例如： http : //www.squarespace.com/customers/ ）-但我想将其专门更改为蓝色叠加层，而不是降低图像的不透明度。

这是我到目前为止所到之处

https://jsfiddle.net/gavinfriel/d98sv4cy/

我想知道是否有一种简单的方法可以使用CSS执行此操作-就像使用颜色遮罩一样，只覆盖png徽标。 我一直在阅读有关overflow: hidden; 属性，但不确定如何实现。

您的帮助将不胜感激，我衷心希望这是可能的！ （谢谢那些已经回答的人）

我正在开发使用Squarespace的CSS解决方案的网站，而不是jquery / javascript。

Answer 1

我会使用过渡，现在已经广泛支持它们。 这基于您提供的代码：

.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;
}

Answer 2

这应该可以解决问题，使用不透明度并过渡https://jsfiddle.net/d98sv4cy/1/

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

Answer 3

CSS混合模式是否值得考虑？