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?

"But the image is not "tinted" like expected." and what do you expect? — Paolo Forgia, May 12 '17 at 13:27

score 37 · Answer 1 · edited Aug 10 '21 at 19:42

37

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.

edited Aug 10 '21 at 19:42

Dharman

30,962
25
85
135

answered May 17 '18 at 12:30

lxtazz

371
3
2

4

Very detailed explanation here: https://stackoverflow.com/a/43960991/4767533. And here a CodePen from one of the answers, that gives you the CSS filters you need to use, for any hex value : https://codepen.io/sosuke/pen/Pjoqqp. – jbgt Sep 10 '19 at 09:05

Joe Keene · Answer 2 · 2017-10-20T07:36:32.733

30

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

edited Oct 20 '17 at 07:36

answered May 12 '17 at 13:32

Joe Keene

2,175
21
27

score 22 · Answer 3 · answered May 12 '17 at 13:28

22

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>

answered May 12 '17 at 13:28

Mukesh Ram

6,248
4
19
37

I tried to adjust your example to my case but it does not really work. http://jsfiddle.net/6ELSF/1049/ I want it to be tinted on hover... – Palmi May 12 '17 at 13:39
1

@Palmi In your fiddle you're not using `opacity` on hover that's why its overlapping image. – Abhishek Pandey May 12 '17 at 13:42
@Pete Again when I try it with my color it is overlapping http://jsfiddle.net/6ELSF/1051/ – Palmi May 12 '17 at 13:44
@palmi used background color with rgba() – Mukesh Ram May 12 '17 at 13:45
again @palmi you need to use some opacity - either use an rgba like the previous fiddle or add some `opacity:0.5` – Pete May 12 '17 at 13:45
@Palmi Try **[this](http://jsfiddle.net/6ELSF/1052/)**, you have to make translucent. – Abhishek Pandey May 12 '17 at 13:45
Thanks @AbhishekPandey I think your example works best for me – Palmi May 12 '17 at 13:59
You can now also use the `mix-blend-mode` property too to have nice effects, like you have with layers in photo editing software now. – pipereset Apr 13 '21 at 14:37

score 7 · Answer 4 · answered Dec 20 '19 at 10:25

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

Daniel · Answer 5 · 2017-05-12T15:52:13.140

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>

score 0 · Answer 6 · answered Oct 01 '19 at 20:21

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>

How to "tint" image with css

6 Answers6

Linked

Related