CSS Filters!

dabblet.css

/**
 * CSS Filters!
 */

figure:nth-of-type(1) img{
-webkit-filter:grayscale(1);
-webkit-transition:-webkit-filter 1s ease-in-out;
}

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


figure:nth-of-type(2) img{
-webkit-filter:sepia(1);
-webkit-transition:-webkit-filter 1s ease-in-out;
}

figure:nth-of-type(2) img:hover{
-webkit-filter:sepia(0);
}


figure:nth-of-type(3) img{
-webkit-filter:saturate(200%);
-webkit-transition:-webkit-filter 1s ease-in-out;
}

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


figure:nth-of-type(4) img{
-webkit-filter:hue-rotate(180deg);
-webkit-transition:-webkit-filter 1s ease-in-out;
}

figure:nth-of-type(4) img:hover{
-webkit-filter:hue-rotate(0deg);
}


figure:nth-of-type(5) img{
-webkit-filter:invert(100%);
-webkit-transition:-webkit-filter 1s ease-in-out;
}

figure:nth-of-type(5) img:hover{
-webkit-filter:invert(0%);
}


figure:nth-of-type(6) img{
-webkit-filter:opacity(30%);
-webkit-transition:-webkit-filter 1s ease-in-out;
}

figure:nth-of-type(6) img:hover{
-webkit-filter:opacity(100%);
}

figure:nth-of-type(7) img{
-webkit-filter:brightness(20%);
-webkit-transition:-webkit-filter 1s ease-in-out;
}

figure:nth-of-type(7) img:hover{
-webkit-filter:brightness(100%);
}

figure:nth-of-type(8) img{
-webkit-filter:contrast(50%);
-webkit-transition:-webkit-filter 1s ease-in-out;
}

figure:nth-of-type(8) img:hover{
-webkit-filter:contrast(100%);
}

figure:nth-of-type(9) img{
-webkit-filter:blur(5px);
-webkit-transition:-webkit-filter 1s ease-in-out;
}

figure:nth-of-type(9) img:hover{
-webkit-filter:blur(0px);
}

figure:nth-of-type(10){
-webkit-filter:drop-shadow(5px 10px 10px rgba(0,0,0,.9));
-webkit-transition:-webkit-filter 1s ease-in-out;
}

figure:nth-of-type(10):hover{
-webkit-filter:drop-shadow(0px 0px 0px rgba(0,0,0,0));
}


figure{
display:block;
float:left;
border:2px solid black;
margin:5px;
background:black;
}

figcaption{
text-align:center;
font-family:sans-serif;
padding:4px;
font-weight:600;
background:black;
color:white;
}

dabblet.html

<h1>CSS Filters</h1>
<h3>Hover for Original Image</h3>

<figure>
<img src="http://lorempixel.com/300/200/nature/1/">
<figcaption>Grayscale</figcaption>
</figure>

<figure>
<img src="http://lorempixel.com/300/200/nature/2/">
<figcaption>Sepia</figcaption>
</figure>

<figure>
<img src="http://lorempixel.com/300/200/nature/3/">
<figcaption>Saturate</figcaption>
</figure>

<figure>
<img src="http://lorempixel.com/300/200/nature/4/">
<figcaption>Hue-Rotate</figcaption>
</figure>

<figure>
<img src="http://lorempixel.com/300/200/nature/5/">
<figcaption>Invert</figcaption>
</figure>

<figure>
<img src="http://lorempixel.com/300/200/nature/6/">
<figcaption>Opacity</figcaption>
</figure>

<figure>
<img src="http://lorempixel.com/300/200/nature/7/">
<figcaption>Brightness</figcaption>
</figure>

<figure>
<img src="http://lorempixel.com/300/200/nature/8/">
<figcaption>Contrast</figcaption>
</figure>

<figure>
<img src="http://lorempixel.com/300/200/sports/">
<figcaption>Blur</figcaption>
</figure>

<figure>
<img src="http://lorempixel.com/300/200/nature/10/">
<figcaption>Drop-Shadow</figcaption>
</figure>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}