Skip to content

Instantly share code, notes, and snippets.

@oli
Forked from ZeeAgency/dabblet.css
Created March 7, 2012 06:00
Show Gist options
  • Save oli/1991345 to your computer and use it in GitHub Desktop.
Save oli/1991345 to your computer and use it in GitHub Desktop.
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 {
background-image: url("http://lorempixel.com/400/200/animals/2/");
}
{"view":"split","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment