Untitled

dabblet.css

figure {
	box-shadow: 0 18px 5px -18px rgba(0,0,0,.7), 0 12px 8px -12px rgba(0,0,0,.5);
	margin: 0 auto;
	overflow: hidden;
	padding-bottom: 10px;
	position: relative;
	width: 300px;
}

figure img {
	width: 100%;
	position: relative;
	z-index: 3;
}

figure:before, figure:after {
	background: rgba(0,0,0,.5);
	box-shadow: 0 0 10px 10px rgba(0,0,0,.5);
	bottom: 10px;
	content: '';
	height: 35px;
	left: 50%;
	margin-left: -115px;
	position: absolute;
      	transform-origin: 50% 100%;
      	transform-style: preserve-3d;
       	transform: matrix3d(1, 0, 0, 0,
                            0, 1, 0, -0.01, 
                            0, 0, 1, 0, 
                            0, 0, 0, 1);
        width: 230px;
        z-index: 1;

}


figure:after {
	background: rgba(0,0,0,.6);
	bottom: 10px;
	box-shadow: 0 0 10px 10px rgba(0,0,0,.6);
	content: '';
	height:8px;
	left: 50%;
	margin: 0 0 0 -100px;
	position: absolute;
	transform: matrix3d(1, 0, 0, 0,
			    0, 1, 0, -0.02, 
                            0, 0, 1, 0, 
                            0, 0, 0, 1);
	width: 200px;
	z-index: 2;
}

dabblet.html

<figure class="container">
	<img src="http://farm8.staticflickr.com/7027/6777756517_89ce0a3fb9_n.jpg" alt="" />
</figure>

settings.json

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