Skip to content

Instantly share code, notes, and snippets.

@oli
oli / dabblet.css
Created April 21, 2012 10:32 — forked from benschwarz/dabblet.css
duplicating a :hover transition using animation
/* duplicating a :hover transition using animation */
article {border: 1px solid red; min-height: 100px;}
.transition {
float: right;
transition: all 250ms;
margin-top: 20px;
opacity: 0;
}
article:hover .transition {
opacity: 1;
@oli
oli / dabblet.css
Created March 7, 2012 06:00 — forked from ZeeAgency/dabblet.css
Crossfade images by transitioning background-image
/* Crossfade images by transitioning background-image */
/* tweaked from dabblet by Zee Agency mentioned in https://twitter.com/ChromiumDev/status/174568285822664704 */
div {
width: 400px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/animals/1/");
background-repeat: no-repeat;
transition: background-image 0.5s;
}
div:hover {
@oli
oli / gist:1052588
Created June 29, 2011 00:50
Example of blockquote with cite + schema.org
<blockquote cite="https://twitter.com/aaronbassett/status/84037182196678658">
<p>I had ice-cream tonight. It was awesome.</p>
<footer itemscope itemtype="http://schema.org/Person">
— <a href="https://twitter.com/aaronbassett" itemprop="url"><span itemprop="name">Aaron Bassett</span></a>
on <cite><a href="https://twitter.com/aaronbassett/status/84037182196678658">Twitter</a></cite>
</footer>
</blockquote>