CSS Thumbnail, design taken from http://dribbble.com/shots/406640-Image-Thumbs-free-PSD-

dabblet.css

/**
 * CSS Thumbnail, design taken from http://dribbble.com/shots/406640-Image-Thumbs-free-PSD-
 */

body { padding: 10em 0; text-align: center; background: url(http://cl.ly/EOkc/farmer.png) }
a, span { position: relative; display: inline-block; }
img { display: block; }
span { overflow: hidden; }
span:after {
	content: "";
	position: absolute;
	top: -30%;
	left: -30%;
	right: -30%;
	bottom: -30%;
	transform: rotate(45deg) translateX(50%);
	background: linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,0));
	transition: all .5s;
}
a:after {
	content: "";
	position: absolute;
	z-index: 2;
	right: -10px;
	top: -10px;
	width: 26px;
	height: 26px;
	border-radius: 100%;
	box-shadow: 0 0 0 4px rgba(255,255,255,.7);
	background: #30C3CC url(http://cl.ly/EOOg/zoom.png) no-repeat 50% 50%;
}
a:hover span:after {
	background: rgba(255,255,255,.4);
	transform: rotate(45deg);
}

dabblet.html

<a href="#"><span><img src="http://cl.ly/EOW4/image.jpg"></span></a>

settings.json

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