Filters, filters everywhere. (c) aqro

dabblet.css

/**
 * Filters, filters everywhere. (c) aqro
 */

* {margin: 0; padding: 0;}
		
html, body {height: 100%; width: 100%;}
body {
	overflow: hidden;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img {
	-webkit-transition: all .3s ease;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


section {
	width: 15%;
	float: left;
	height: 50px;
	background: rgba(255,255,255,.5);
	border-radius: 50px;
	line-height: 50px;
	text-align: center;
	position: relative;
	z-index: 5;
	margin-top: 300px;
	font-size: 14px;
	margin-left: 4%;
}
.saturate:hover ~ img {-webkit-filter: saturate(1000%);}
.blur:hover ~ img {	-webkit-filter: blur(50px);}
.sepia:hover ~ img {	-webkit-filter: sepia(100%);}
.hue-rotate:hover ~ img {	-webkit-filter: hue-rotate(180deg);}
.contrast:hover ~ img {	-webkit-filter: contrast(500%);}

dabblet.html

<section class="saturate">-webkit-filter: saturate(4000%)</section>
<section class="blur">-webkit-filter: blur(50px)</section>
<section class="sepia">-webkit-filter: sepia(100%)</section>
<section class="hue-rotate">-webkit-filter: hue-rotate(180deg)</section>
<section class="contrast">-webkit-filter: contrast(500%)</section>

<img src="http://narwhaler.com/img/xj/u/come-at-me-bro-bullet-cat-xjuW5k.jpg" />

dabblet.js

// alert('Hello world!');

settings.json

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