How to "tint" image with css

user_4070724 0
Viewed 98861

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:

enter image description here

but I want it to look like this:

enter image description here

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?

css html
6 Answers

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.

user_98061310

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

user_100487990

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>

user_35772570
Related