Add hue to a regular image with CSS

Question

I have a regular image in the image tag like this:

<img src="https://i.stack.imgur.com/KCRMm.jpg" class="image">

that I want to turn into this image. I saw some examples of the blend mode but for the blend mode you need to set the image as background but I have the image in the image tag.

Can the hue be added to the image via css without setting image as background?

yes, you can achieve that kind of effect using `CSS` only. – vivekkupadhyay Feb 20 '17 at 10:03 — vivekkupadhyay, Feb 20 '17 at 10:03

score 5 · Answer 1 · edited May 23 '17 at 11:46

5

Use a parent to your image with the desired background color.
Than set mix-blend-mode: overlay; to your image

img{max-width:100%;vertical-align:top;}


.blend-overlay{ mix-blend-mode: overlay; }

<div style="background:#822;">
   <img class="blend-overlay" src="https://i.imgur.com/StEW4JD.jpg">
</div>

https://stackoverflow.com/a/31528825/383904

edited May 23 '17 at 11:46

Community

1
1

answered Feb 20 '17 at 10:04

Roko C. Buljan

196,159
39
305
313

Note that mix-blend-mode is not supported in all browsers: http://caniuse.com/#search=mix-blend-mode – Mario Plantosar Feb 20 '17 at 10:06

Jenti Dabhi · Answer 2 · 2017-02-28T07:09:43.373

2

you looking this type image. Demo link here https://jsfiddle.net/JentiDabhi/9v96yfro/

HTML

<div class="image-box">
  <img src="http://i.imgur.com/StEW4JD.jpg" class="image">
</div>

CSS

.image-box {
    position: relative;
    display: inline-block;
}

div.image:after {
    content: "";
    background: rgba(255, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

edited Feb 28 '17 at 07:09

answered Feb 20 '17 at 10:08

Jenti Dabhi

870
5
11

you are using the __.image__ class 2 two times here which might cause an issue with existing code. – Type-Style Feb 20 '17 at 10:37
OK now fine i had change class – Jenti Dabhi Feb 28 '17 at 07:10

score 1 · Answer 3 · answered Feb 20 '17 at 10:42

One option would be to use css filter (on image) and css-pseudo element as overlay. But that (filter) won't work on older IE tho...

img {
  width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.image-wrapper {
  width: 100%;
  position: relative;
}

.image-wrapper::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,.2);
}

<div class="image-wrapper">
  <img src="http://i.imgur.com/StEW4JD.jpg" class="image">
</div>

score 0 · Answer 4 · answered Feb 20 '17 at 10:50

I'll suggest using CSS Filter

its Browser Support is pretty good with -webkit- prefix besides IE < 12.

https://jsfiddle.net/9v96yfro/2/

.image {
  filter: sepia(100%) hue-rotate(300deg) brightness(75%) saturate(200%);
}

Quick recap on what it does: Its colorizes the image by applying a sepia effect to the image taking all color information out of the image and changing the hue of the color by 300deg to a reddish kinda color. Saturation and brightness is set to match your example image.

Play around with the values and adjust them to your liking. You can read more about CSS Filter at Mozilla Developer Network

Add hue to a regular image with CSS

4 Answers4

I'll suggest using CSS Filter