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 blend modes吗？

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

3 个答案: