どのようにCSS

Question

と「色合い」の画像に私はこのような背景の属性で画像の着色しよう：

.image-holder:hover { 
 
    opacity: 1; 
 
    transition: opacity 1s, background 1s; 
 
    background: #EBEFF7; 
 
} 
 

 
.image-holder { 
 
    height: 250px; 
 
    width: 200px; 
 
    opacity: 0.5; 
 
    transition: opacity 1s, background 1s; 
 
}

<div class="image-holder"> 
 
    <img src="https://dummyimage.com/200x200/fff/000000.png" /> 
 
</div>

http://jsfiddle.net/6ELSF/1047/

しかし、画像が「着色」されていません期待通り。

ホバーで、それは次のようになります。

が、私はそれは次のようになりたい：

私は画像のオーバーレイに関する見つかったいくつかのソリューションをテストしてみました私の例ではどちらもうまくいかなかった。 これを最も複雑な仕組みでどのように実現できますか？

Answer 1

:beforeセレクタを使用して、あなたは別の色

.image-holder { 
 
    height: 200px; 
 
    width: 200px; 
 
    position:relative; 
 
}  
 
.image-holder:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0,255,255, 0.5); 
 
    transition: all .3s linear; 
 
} 
 
.image-holder:hover:before { 
 
    background: none; 
 
}

<div class="image-holder"> 
 
    <img src="http://lorempixel.com/200/200" /> 
 
</div>

Answer 2

お使いのブラウザのサポートを使用filterに応じて、とは、あなたの処分で多くのオプションは、caniuse.comは有望http://caniuse.com/#search=css%20filter色合いの画像に見えることができます。 -

filter: blur(5px); 
filter: brightness(0.4); 
filter: contrast(200%); 
filter: drop-shadow(16px 16px 20px blue); 
filter: grayscale(50%); 
filter: hue-rotate(90deg); 
filter: invert(75%); 
filter: opacity(25%); 
filter: saturate(30%); 
filter: sepia(60%); 

Answer 3

親コンテナの不透明度を変更すると、すべての子が変更されます。あなたの色合いを制御する別のdivを作成します。一緒に何かを叩きましたが、本質的なものがあります。

.image-holder { 
 
    position: relative; 
 
    max-height: 250px; 
 
    max-width: 200px; 
 
} 
 

 
.image-holder img { 
 
    display: block; 
 
    opacity: 0.5; 
 
    max-width: 100%; 
 
    max-height: inherit; 
 
} 
 

 
.tint { 
 
    position: absolute; 
 
    max-height: 250px; 
 
    max-width: 200px; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    opacity: 0; 
 
    background: #00f; 
 
    transition: opacity 1s; 
 
} 
 

 
.image-holder:hover .tint { 
 
    opacity: 1; 
 
}

<div class="image-holder"> 
 
    <div class='tint'></div> 
 
    <img src="http://lorempixel.com/200/200" /> 
 
</div>