Skip to content

Instantly share code, notes, and snippets.

@juice49
Created August 20, 2012 08:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save juice49/3402206 to your computer and use it in GitHub Desktop.
Save juice49/3402206 to your computer and use it in GitHub Desktop.
Untitled
@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: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;
}
<a class="peel-away" href="#">
<div class="inner">
<img src="http://lorempixum.com/300/300" />
</div>
</a>
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment