Untitled

dabblet.css

.container { width: 140px; height: 140px; background: green; position: relative; }
.circle { border-radius: 100%; }
.circle.o--hidden {
	-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
.size-of-parent { width: 100%; height: 100%; }
.shadow {
	box-shadow: 0 0 200px rgba(0, 0, 0, .5) inset, 0 0 20px rgba(0, 0, 0, .5) inset;
}
.on-top {
	z-index: 9999;
}
.pos--rel { position: relative; }
.pos--abs { position: absolute; }

.o--hidden { overflow: hidden; }

.grow-from-bottom {
	animation: grow-from-bottom .5s ease;
	transform: scale(1);
	position: absolute;
	top: 0;
}

@keyframes grow-from-bottom {
	0% {
		transform: scale(0);
		top: 100%;
	}	
}

dabblet.html

<div class="pos--rel">
	<div class="container circle o--hidden">
		<div class="circle size-of-parent shadow pos--abs on-top"></div>
		<div class="grow-from-bottom o--hidden circle"><img class="size-of-parent circle" src="http://placebacn.com/200/200"></div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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