ホバー上のオーバーレイの色をcss - .png画像

Question

私のウェブサイトのホバー効果でカラーオーバーレイを作成しようとしています。私はクライアント/顧客を表示しています。 （のように：http://www.squarespace.com/customers/） - しかし、私は具体的に青のオーバーレイに変更したい、画像の不透明度を減らすことはできません。それが唯一のPNGロゴをカバーしてカラーマスクを使用してのように - 私は思ったんだけど、これまで

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

を持っているのはここ

は、CSSでこれを行う簡単な方法があります。私はoverflow: hidden;のプロパティについて読んできましたが、実装方法はわかりません。

お手数をおかけしておりますが、これが可能であることを心から願っております!! （すでに回答してくださった方々、ありがとうございます）

jquery/javascriptとは対照的に、Squarespaceを使って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 blend modes何かか？