Photo Stack with :hover animation

dabblet.css

/**
 * Photo Stack with :hover animation
 */

figure.img {
	border: 1px solid #eee;
	background: #fff;
	padding: 10px;	
	float: left;
	margin: 20px;
	border-radius: 3px;
	box-shadow:
		inset 0 0 30px #fafafa, 
		0px 1px 1px #999, 
		0px 2px 1px #fff, 
		0px 3px 1px #aaa, 
		0px 4px 1px #fff, 
		0px 5px 1px #bbb, 
		0px 6px 1px #fff, 
		0px 7px 1px #ccc;
	transition: box-shadow 0.15s ease-out, top 0.15s ease-out;
	position: relative;
	top:0;
}

figure.img:hover {
	top: -7px;
	box-shadow:		
		inset 0 0 30px #fafafa, 
		0px 2px 1px #999, 
		0px 4px 1px #fff, 
		0px 6px 1px #aaa, 
		0px 8px 1px #fff, 
		0px 10px 1px #bbb, 
		0px 12px 1px #fff, 
		0px 14px 1px #ccc;
}

figure.img img {
	width: 300px;
	height: 300px;
	display: block;
	background: #eee;
	border: none;
}

figure.img figcaption {
	color: #666;
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 40px;
	margin-bottom: -10px;
	text-align: center;
}

dabblet.html

<figure class="img">
	<img src="http://placekitten.com/300/300/" alt="Image" />
	<figcaption>Lorem ipsum dolor sit amet...</figcaption>
</figure>

settings.json

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