CODEWITHSUNDEEP
cssfilter
Helenesh
Helenesh

Reputation: 4349

Color tinting on images using the filter property

I am trying to add a red overlay to an image in order to acquire the following result using the css filter property:

enter image description here

The code I currently have does add an overlay, but I cannot seem to achieve the same result as the image above.

img {
   filter: sepia() saturate(4) hue-rotate(312deg) brightness(80%) opacity(5);
}

Gives me the following result:

enter image description here

The code snipper is from Lea Verou, which you can play with here: http://dabblet.com/gist/b338c9940a31b727b7a9

What should I change to my css in order to achieve the same result as shown on the first image?

Upvotes: 1

Views: 1539

Answers (1)

Charlie
Charlie

Reputation: 23798

You should try to mix a background color (red) than rotating hue. Then you can adjust the saturation to get the desired effect.

.filter {
  position: relative;
  -webkit-filter: brightness(81%) saturate(113%);
  filter: brightness(81%) saturate(113%);
}
.filter::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  background: rgba(253, 62, 65, 0.91);
}

You can use a website like this to generate the code you can use.

https://www.cssfilters.co/

enter image description here

Upvotes: 3

Related Questions