悬停时使用.png图像进行彩色叠加

Question

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

到目前为止，就在这里

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

我想知道有没有一种简单的方法可以用css做到这一点——比如使用彩色遮罩，这样只覆盖png徽标。我一直在读关于overflow: hidden;属性的文章，但不确定如何实现它

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

我正在使用Squarespace开发网站，与jquery/javascript相比，css解决方案将不胜感激。

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混合模式吗？