html - 使用 css - .png 图像悬停时颜色叠加

Question

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

这是我到目前为止的地方

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

我想知道是否有一种简单的方法可以使用 css 执行此操作 - 例如使用颜色 mask 以便仅覆盖 png Logo 。我一直在阅读有关 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;
}