Rounded imgs

dabblet.css

/**
 * Rounded imgs
 */
body {
	background: #111;
}
#pagewrap {
	width: 910px;
	display: block;
	margin: auto;
	font-size: 0;
}
div.imgcontainer {
	width: 200px;
	height: 200px;
	background-repeat: no-repeat;
	margin-right: 10px;
	display: inline-block;
	border: 10px white solid;
	border-radius: 50%;
	overflow: hidden;
	transition: all 1s ease;
}
div.imgcontainer:nth-child(4n+4) {
	margin-right: 0px;
}
div.imgbox {
	width: 200px;
	height: 200px;
	background-image: inherit;
	background-position: 0px -200px;
	transition: all 1s ease
}
.imgbox a {
	display:block;
	width: 200px;
	height: 200px;
}
div.imgcontainer:hover {
	border-radius: 12.5%;
	transition: all 0.5s ease;
}
div.imgcontainer:hover > div {
	opacity: 0;
	transition: all 0.5s ease;
}
#m2f-2011-1 {
	background-image: url("http://www.blimpage.com/pants/dabblet/sprite-m2f-2011-1.jpg");
}
#m2f-2011-2 {
	background-image: url("http://www.blimpage.com/pants/dabblet/sprite-m2f-2011-2.jpg");
}
#m2f-2011-3 {
	background-image: url("http://www.blimpage.com/pants/dabblet/sprite-m2f-2011-3.jpg");
}
#m2f-2011-4 {
	background-image: url("http://www.blimpage.com/pants/dabblet/sprite-m2f-2011-4.jpg");
}

dabblet.html

<div id="pagewrap">
	<div id="m2f-2011-1" class="imgcontainer"><div class="imgbox"><a href="http://www.blimpage.com/portfolio/cd-artwork-music2face/" target="_blank"></a></div></div>
	<div id="m2f-2011-2" class="imgcontainer"><div class="imgbox"><a href="http://www.blimpage.com/portfolio/cd-artwork-music2face-2/" target="_blank"></a></div></div>
	<div id="m2f-2011-3" class="imgcontainer"><div class="imgbox"><a href="http://www.blimpage.com/portfolio/cd-artwork-music2face-3/" target="_blank"></a></div></div>
	<div id="m2f-2011-4" class="imgcontainer"><div class="imgbox"><a href="http://www.blimpage.com/portfolio/cd-artwork-music2face-4/" target="_blank"></a></div></div>
</div>

settings.json

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