Saturate Css Filter

by Ananda Projapati

HTML

<h2>
Saturate Filter
</h2>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Saturate:0</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Saturate:0.5</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Saturate:75%</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Saturate:100%</figcaption>
</figure>

CSS

body {
  font-family: arial;
}

img {
  width: 300px;
  height: 200px;
  margin: 0;
}

figure {
  position: relative;
  margin: 0;
  padding: 0;
  display: inline-block;
}

figcaption {
  position: absolute;
  top: 1em;
  left: 0;
  padding: 0.3em .5em;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-weight: 200;
}

figure:nth-of-type(1) img {
  -webkit-filter:saturate(0);
  filter:saturate(0);
}

figure:nth-of-type(2) img {
  -webkit-filter:saturate(0.5);
  filter:saturate(0.5);
}

figure:nth-of-type(3) img {
  -webkit-filter:saturate(75%);
  filter:saturate(75%);
}

figure:nth-of-type(4) img {
  -webkit-filter:saturate(100%);
  filter:saturate(100%);
}