CSS Photo Album

dabblet.css

/* CSS Photo Album */
/* Rebound of this shot by @daryl: http://drbl.in/fwwM */

* {
	margin: 0;
	padding: 0;
	position: relative;
	box-sizing: border-box;
}

img {
	display: block;
}

html, body {
	min-height: 100%;
}

html {
	font: 100%/1.5 Proxima Nova, Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #fff;
	background: #368 url(http://farm8.staticflickr.com/7053/6946650474_12f212c422_z.jpg) center no-repeat;
	background-size: cover;
	-webkit-font-smoothing: antialiased;
}

.album {
	position: absolute;
	left: 0;
	right: 0;
	width: 250px;
	margin: auto;
	top: 160px;
	text-align: center;
}

.frame {
	padding: 10px;
	line-height: .7;
	border-radius: .25em;
	background-color: rgba(255,255,255,.7);
	width: 180px;
	margin: 0 auto;
	box-shadow: inset 0 1px 1px rgba(255,255,255,.3),
	            inset 0 0 0 1px rgba(255,255,255,.2),
	            0 1px 2px rgba(0,0,0,.3),
	            0 7px 7px -3px rgba(0,0,0,.5);
	cursor: pointer;
}

	.frame:before, .frame:after {
		content:'';
		padding: 10px;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255,255,255,.5);
		box-shadow: inset 0 1px 1px rgba(255,255,255,.3),
		            inset 0 0 0 1px rgba(255,255,255,.2),
		            0 1px 2px rgba(0,0,0,.3);
		border-radius: .25em;
		transform: rotate(-5deg);
	}
	
	.frame:after {
		transform: rotate(5deg);
	}
	
	.frame i {
		position: absolute;
		z-index: 1;
		display: block;
	}
	
		.frame i:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: .25em;
			background-image: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 50%);
			box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 2px 1px rgba(255,255,255,.3);
			-webkit-mask-image: -webkit-linear-gradient(#000, transparent)
		}
	
	.frame i img {
		border-radius: .25em;
		transition: .2s;
		transform-origin: top left;
		background-color: #123;

	}
	
		.album:hover .frame i img {
			transform: scale(.5);
		}
	
	.frame > img {
		display: inline-block;
		margin-right: -.15em;
		margin-left: -.15em;
	}
	
		.frame > img:nth-of-type(1) { border-radius: .25em 0 0 0; }
		.frame > img:nth-of-type(2) { border-radius: 0 .25em 0 0; }
		.frame > img:nth-of-type(3) { border-radius: 0 0 0 .25em; }
		.frame > img:nth-of-type(4) { border-radius: 0 0 .25em 0; }

	
.count {
	font-size: .875em;
	font-weight: 700;
	background-color: #ec621f;
	padding: .5em .8em .4em;
	border-radius: .25em;
	position: absolute;
	top: 80px;
	width: 50%;
	margin-left: 20%;
	text-align: right;
	z-index: -1;
	transition: .3s;
}

	.album:hover .count {
		width: 80%;
	}
	
.name {
	font-weight: 700;
	display: inline-block;
	margin: 1em auto;
	padding: .25em 1em;
	background-color: rgba(0,0,0,.6);
	border-radius: 3em;
	transition: .1s;
	transform: scale(.8) translateY(-5px);
	opacity: 0;
	cursor: pointer;
}

	.album:hover .name {
		transform: none;
		opacity: 1;
	}
	
	.name:hover {
		box-shadow: 0 0 0 3px #f6d761;
	}

dabblet.html

<div class="album">
	<figure class="frame">
		<i><img src="http://placedog.com/320/320" width="160" height="160"></i>

		<img class="thumb" src="http://placedog.com/170/170" width="80" height="80">
		<img class="thumb" src="http://placedog.com/180/180" width="80" height="80">
		<img class="thumb" src="http://placedog.com/190/190" width="80" height="80">
		<img class="thumb" src="http://placedog.com/200/200" width="80" height="80">

	</figure>
	<span class="count">18</span>
	<figcaption class="name">Dogs</figcaption>
</div>
	

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}