How to "tint" image with css - html

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

I used some combined filters for tinting an image completely. Tinting is not possible directly (with filters), but you can paint it sepia, adapt saturation and brightness, and get the desired color by using hue-rotate... I think it was something like this ...
img {
filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
}
You will need to adapt it to your needs.

Answer 2

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%);

Answer 3

Using :before selector you can tint images with different colors
.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 4

You can achieve this using mix-blend-mode which currently has ~88% support. You can use the same markup as before.
<div class="image-holder">
<img src="https://dummyimage.com/200x200/fff/000000.png" />
</div>
But use this css:
div.image-holder {
transition: background-color .2s;
width: min-content;
}
div.image-holder:hover {
background-color: #EBEFF7;
}
img {
display: block;
/* Blend with parents background: */
mix-blend-mode: multiply;
}
For this demo you are wanting to tint whites towards your chosen color so you want to use the multiply blend mode. If you are wanting to tint blacks then use the screen blend mode.
Codepen Demo

Answer 5

Changing the opacity of the parent container changes all children. make a separate div to control your tint. I hammered something together, but the essentials are there.
.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>

Answer 6

It's not exactly a real tint but this is the way I find easier to achieve a color layer over an image. The trick is to use an absolute layer with rgba color over an image. It works perfectly for my general cases.
Have a go!
.mycontainer{
position:relative;
width:50%;
margin:auto;
}
.overtint {
position:absolute;
background-color: rgba(255,0,0,0.6);
width:100%; height:100%;
}
img{ width:100%;}
a:hover .overtint {
background-color: rgba(0,255,0,0.6);
transition-duration: .5s;
}
<div class="mycontainer">
<a href="#">
<div class="overtint"></div>
<img src="https://via.placeholder.com/300x150">
</a>
</div>