Contrast Css Filter

by Ananda Projapati

HTML

<h2>
Contrast Filter
</h2>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Contrast:0%</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Contrast:25%</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Contrast:175%</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Contrast:250%</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:contrast(0%);
  filter:contrast(0%);
}

figure:nth-of-type(2) img {
  -webkit-filter:contrast(25%);
  filter:contrast(25%);
}

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

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