css

Question

我正在尝试为我的网站创建悬停效果的颜色叠加层。我正在显示 clients/customers。（像这样：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 图像悬停时的颜色叠加

Colour overlay on hover with css - .png image

html

overlay

squarespace