keyhole

dabblet.css

/* keyhole  */
html {
padding-top:3em;
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;}
div {float:left;
width:150px;
padding:20px;
margin:20px;
border:solid;
overflow:hidden;
text-align:center;
line-height:0;
background:#333;
box-shadow:inset 0 10px 20px 0 green;
transition:1s;}
div:before {content:'';
display:inline-block;
height:100px;
width:100px;
border-radius:150px;
box-shadow:0 -104px 0 100px white, 75px 50px 0 white, -75px 52px 0 white;
}
div:after {content:'';
display:inline-block;
width:150px;
height:300px;
box-shadow:inset -0px -50px 0 50px white, 0 30px 0 30px white;
margin:-6px 0 -100px;}
:target  +div{
box-shadow:inset 0 -400px 50px 0 green;
transition:1s;
}
#keyhole {position:fixed;top:0;}
a:link, a:visited  {
text-decoration:none;
margin:0 1em;
line-height:1.5em;
padding:0 1em;
border:1px solid gray;
border-radius:5px;
background:linear-gradient(0deg,silver, gray, silver);
color:white;
}

dabblet.html

<a id="keyhole"></a><div>
</div> 
<a href="#keyhole">click</a> <a href="#">retry</a>

dabblet.js

// alert('Hello world!');

settings.json

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