Untitled

dabblet.css

@keyframes peel-open {
	
	0% {
		width:150px;
		height:150px;
	}
	
	100% {
		width:300px;
		height:300px;
	}
	
}

@keyframes peel-close {
	
	0% {
		width:300px;
		height:300px;
	}
	
	100% {
		width:150px;
		height:150px;
	}
	
}

html,
body {
	margin:0;
	padding:0;
	background:#4B5358;
}

.peel-away {
	position:absolute;
	top:0;
	right:0;
	width:150px;
	height:150px;
	overflow:hidden;
	background:#fff;
	box-shadow:100px -60px 100px 30px rgba(0,0,0,0.8);
	animation:peel-close 0.8s;
}

.peel-away:hover {
	width:300px;
	height:300px;
	animation:peel-open 0.8s;
}

/*.peel-away:not(:hover) {
	animation:peel-close 0.8s;
}*/

.peel-away:after {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	background:#394247;
	background:linear-gradient(45deg, #394247, #51626B 45%, #394247 50%, transparent 50%);
	content:'';
}

	.peel-away .inner {
		position:absolute;
		width:300px;
		height:300px;
		top:0;
		right:0;
	}

dabblet.html

<a class="peel-away" href="#">
	<div class="inner">
		<img src="http://lorempixum.com/300/300" />
	</div>
</a>

settings.json

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