帶有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混合模式是否值得考慮？