Blur Css Filter

by Ananda Projapati

HTML

<h2>
Blur Filter
</h2>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Blur:0</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Blur:5px</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Blur:1em</figcaption>
</figure>
<figure>
  <img src="http://www.designtheway.com/wp-content/uploads/artistic-bright-color-colored-42226.jpeg" />
  <figcaption>Blur:0.5rem</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:blur(0);
  filter:blur(0);
}

figure:nth-of-type(2) img {
  -webkit-filter:blur(5px);
  filter:blur(5px);
}

figure:nth-of-type(3) img {
  -webkit-filter:blur(1em);
  filter:blur(1em);
}

figure:nth-of-type(4) img {
  -webkit-filter:blur(0.5rem);
  filter:blur(0.5rem);
}