Skip to content

Instantly share code, notes, and snippets.

@dvnckr dvnckr/dabblet.css
Created Oct 11, 2012

Embed
What would you like to do?
body {
background: #DDD;
text-align:center;
}
a {
display:inline-block;
position:relative;
width:200px;
height: 200px;
margin: 40px 20px;
background: url('http://www.satlogo.com/logo/hires/flag/rw.png') repeat 228px -22px;
box-shadow: 0 4px 6px #111;
}
a>div {
position:absolute;
top:0; right:0; left:0; bottom:0px;
border:1px solid rgba(0,0,0,0.5);
transition: border 0.2s ease;
}
a:hover>div {
border-width:100px;
}
a:nth-child(2), a:nth-child(2)>div {
border-radius: 50%;}
/* http://www.satlogo.com/logo/hires/flag/rw.png */
<a href="http://www.twitter.com">
<div></div>
</a>
<a href="http://www.twitter.com">
<div></div>
</a>
<a href="http://www.twitter.com">
<div></div>
</a>
{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.