Skip to content

Instantly share code, notes, and snippets.

@kandeefloss

kandeefloss/dabblet.css

Forked from anonymous/dabblet.css
Created August 3, 2013 10:30
Show Gist options
  • Save kandeefloss/6146031 to your computer and use it in GitHub Desktop.
Save kandeefloss/6146031 to your computer and use it in GitHub Desktop.
Download ZIP
Delayed transitions
Raw
dabblet.css
/**
* Delayed transitions
*/
.container { font: 14px sans-serif; width: 11em; height: 10em; background: #eee; position: relative; }
.title, .content { position: absolute; left: 1em; right: 0em; background: orange; color: white; padding: .5em 1em; }
.title { top: 7em; transition: all .3s .3s; }
.content { top: 11em; transition: all .3s; }
.container:hover .title { top: 1em; transition: all .3s; }
.container:hover .content { top: 4em; transition: all .3s .3s; }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="container">
<div class="title">Title goes here</div>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment