Multiple Css Filter

by Ananda Projapati

HTML

<h2>
Multiple Filter
</h2>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Invert:80% + Sepia:80%</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Hue-rotate:25deg + Contrast:2 + Brightness:120%</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Sepia:1 + Grayscale:0.5</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Grayscale:0.5 + Sepia:1</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:invert(80%) sepia(80%);
  filter:invert(80%) sepia(80%);
}

figure:nth-of-type(2) img {
  -webkit-filter:hue-rotate(25deg) contrast(2) brightness(120%);
  filter:hue-rotate(25deg) contrast(2) brightness(120%);
}

figure:nth-of-type(3) img {
  -webkit-filter:sepia(1) grayscale(0.5);
  filter:sepia(1) grayscale(0.5);
}

figure:nth-of-type(4) img {
  -webkit-filter:grayscale(0.5) sepia(1);
  filter:grayscale(0.5) sepia(1);
}