Adding filters to images using CSS

This latest post is related to CSS in which i will add filter to some images purely using CSS.
Lez get into it.

We'll first see the markup write below and will see the output pics one by one. You'll also get the CodePen link. 😁

Adding filter to images in CSS

1. Open you code editor and be ready with the pic.

<div>
  <h1>Original Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>

<div class="filt1">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>
<br>
<div class="filt2">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>
<br>
<div class="filt3">
  <h1>Filtered Image:</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg">
</div>

nd finally the CSS

img {
  display: block;
  max-width: 100%;

}
.filt1{
   filter: grayscale(90%) sepia(13%) saturate(700%); 
}
.filt2{
  filter: hue-rotate(-40deg); 
}
.filt3{
  filter: contrast(170%) saturate(80%) 
}

**
Lez see the output**

So first basic image was this

1. Basic image

This was the real pic we've added filter to this pic.

1. Saturated

 filter: grayscale(90%) sepia(13%) saturate(700%); 

1. BnW

  filter: hue-rotate(-40deg); 

1. Sharp 😂

  filter: hue-rotate(-40deg); 

To use CodePen =>

---

Thanks for seeing this tutorial. Hope you like it.

If you have anything going in your mind comment down below. 😎

Comments

[Mathew Chan]

Awesome tip! Gonna keep this in mind.

[Rahul]

I don't know why there is numbering problem in pics.