Glossy overlay

dabblet.css

/* Glossy overlay */

html {
	min-height: 100%;
	background: linear-gradient(#000, #445);
}

figure {
	width: 162px;
	height: 162px;
	margin: 24px auto;
	position: relative;
	box-shadow: 0 2px 5px rgba(0,0,0,.4);
	border-radius: 5px;
}

figure img {
	display: block;
	border-radius: 5px;
}

figure:after {
	position: absolute;
	pointer-events: none;
	content:'';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
	background-image: linear-gradient(-45deg, rgba(255,255,255,.4), rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 50%);
	-webkit-mask-image: linear-gradient(#000, transparent);
	mask: url(http://daneden.me/labs/albums/images/mask.svg#mask);
}

dabblet.html

<figure><img src=http://placekitten.com/162></figure>

settings.json

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