Skip to content

Instantly share code, notes, and snippets.

@ginader

ginader/dabblet.css

Created February 3, 2012 18:38
Show Gist options
  • Save ginader/1731652 to your computer and use it in GitHub Desktop.
Save ginader/1731652 to your computer and use it in GitHub Desktop.
Download ZIP
fade in from display:none(ish)
Raw
dabblet.css
/**
* fade in from display:none(ish)
* taken from http://jsfiddle.net/Schepp/KFja4/
*/
body{
margin-top:3em;
}
span {
display: inline-block;
overflow: hidden;
max-width: 0;
margin-right: -0.25em;
opacity: 0;
transition-property: max-width, margin-right, opacity;
transition-duration: 0, 0, 0.5s;
transition-delay: 0.5s, 0.5s, 0;
}
p:hover span {
max-width: 9999px;
margin-right: 0;
opacity: 1;
transition-delay: 0, 0, 0.5s;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<p>Hover on me! Lorem ipsum <span>dolor</span> sit amet</p>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment