Add hue to a regular image using CSS

Question

I have a regular image in an image tag, like this :

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

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

Is it possible to add a hue to an image via css without setting the image as a background?

Answer 1

Use the parent element for the image with the desired background color.
Then set mix-blend-mode: overlay;to 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>

Run codeHide result

fooobar.com/questions/489350/...

Answer 2

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

Answer 3

- css ( ) css-- . () 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>

Hide result

Answer 4

CSS Filter

-webkit-, IE < 12.

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

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

Brief information about what it does: It is colored by the image, applying the sepia effect to the image, getting all the color information from the image and changing the color cast by 300 degrees to a reddish color. Saturation and brightness match your pattern.

Play with the values ​​and customize them to your liking. You can learn more about CSS Filter in the Mozilla Developer Network