How to "tint" image with css

Question

I try to tint an image with the background attribute like this:

.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/

But the image is not "tinted" like expected.

On hover it looks like this:

but I want it to look like this:

I tried to test some solution I found regarding overlay of images but neither worked in my example. How do accomplish this in the least complicated manner?

Answer 1

Depending on your browser support use filter, many options at your disposal, caniuse.com looks promising 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%);