Skip to content

Instantly share code, notes, and snippets.

@betabong
Forked from anonymous/dabblet.css
Created February 21, 2012 07:47
Show Gist options
  • Save betabong/1874919 to your computer and use it in GitHub Desktop.
Save betabong/1874919 to your computer and use it in GitHub Desktop.
Untitled
div#logo {
display: block;
margin: 150px auto 0;
width: 128px;
height: 128px;
background: url(http://meodai.ch/hvlogo.png);
}
div#logo div {
opacity: 0;
width: 100%;
margin: 30px 0 0;
height: 33.333%;
background: transparent url(http://a2.twimg.com/profile_images/1296150742/hv_twitter_reasonably_small.png) -400px 44px no-repeat;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
div#logo:hover div {
opacity: 1;
margin: 0;
-webkit-transform: rotate(0);
-webkit-transition: background-position 0.7s ease-out,
margin 0.3s ease-out,
-webkit-transform 1s ease-in-out;
-moz-transform: rotate(0);
-moz-transition: background-position 0.7s ease-out,
margin 0.3s ease-out,
-moz-transform 1s ease-in-out;
}
div#logo:hover div.c1 {
background-position: 0 0;
}
div#logo div.c2 {
margin-right: 50px;
}
div#logo:hover div.c2 {
background-position: 0 -43px;
}
div#logo:hover div.c3 {
background-position: 0 -86px;
}
<div id="logo">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment