Add hue to a regular image with CSS

Question

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

<img src="http://i.imgur.com/StEW4JD.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?

Answer 1

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

Answer 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%;
}