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: #ccc;
	background-size: cover;
	-webkit-font-smoothing: antialiased;
}

.box {
	float: left;
	width: 350px;
	top: 50px;
	margin: auto;
	text-align: center;
}

ul {
list-style: none
}

.frame {
	padding: 10px;
	line-height: .7;
	border-radius: .25em;
	background-color: rgba(255,255,255,.7);
	width: 250px;
	height: 230px;
	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;

	}
	
		.box.animate: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 .4em .4em;
	border-radius: .25em;
	position: absolute;
	top: 105px;
	width: 80px;
	margin-left: 28%;
	text-align: right;
	z-index: -1;
	transition: .3s;
}

	.box:hover .count {
		width: 90px;
	}
	
.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: .5;
	cursor: pointer;
}

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

dabblet.html

<ul>
<li>
<div class="box animate">
	<figure class="frame">
		<i><img src="http://placedog.com/320/320" width="230" height="210"></i>

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

	</figure>
	<span class="count">14%</span>
	<figcaption class="name">Dogs</figcaption>
</div>
</li>

<li>
<div class="box animate">
	<figure class="frame">
		<i><img src="http://placedog.com/320/320" width="230" height="210"></i>

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

	</figure>
	<span class="count">100%</span>
	<figcaption class="name">Dogs</figcaption>
</div>
</li>
</ul>

dabblet.js

console.log('test');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}