CSS Filter playin'

dabblet.css

/**
 * CSS Filter playin'
 */
 
h1 {
	color: #353535;
	font-family: georgia;
	font-size: 14px;
	font-style: italic;
	font-weight: normal;
}
 
.gumbo {
	border: 4px solid #414141;
	display: inline-block;
}

.gumbo img {
	border: 1px solid #fff;
	display: block;
	-webkit-filter: grayscale(1) blur(1px) contrast(2) brightness(0.2);
	transition: -webkit-filter 0.3s;
}

.gumbo:hover {
	border-color: #a73024;

}

.gumbo:hover img {
	-webkit-filter: grayscale(0) blur(0) contrast(1) brightness(0);
}

/* This is super cool because the shadow respects the png transparency!
It is a bit sluggish with the transition though */
.o-mer-gerd {
	-webkit-filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.5)) grayscale(1);
	transition: -webkit-filter 0.3s;
}

.o-mer-gerd:hover {
	-webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) grayscale(0);
}

dabblet.html

<h1>Put your mouse on that picture!</h1>
<a class="gumbo" href="http://www.flickr.com/photos/tylergaw/5534985531/in/photostream">
	<img src="http://farm6.staticflickr.com/5254/5534985531_68e5b39b21.jpg">
</a>
<br>
<a class="o-mer-gerd" href="http://www.opera.com">
	<img src="http://files.myopera.com/metude/albums/8700622/Opera_512x512.png">
</a>

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}