dziudek · March 26, 2013 22:05
diff --git a/dabblet.css b/dabblet.css
 /**
 * Chrome background-image transition demo
 */

 div {
 	float: left;
 	height: 300px;
 	transition: all .5s ease-out;
 	width: 300px;
 }

 #test {
 	background: transparent url('http://placekitten.com/300/300') no-repeat 0 0;
 }

 #test:hover {
 	background-image: url('http://placekitten.com/g/300/300');
 }

 #test-scale {
 	background: transparent url('http://placekitten.com/300/300') no-repeat center center;
 }

 #test-scale:hover {
 	background-image: url('http://placekitten.com/g/250/250');
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <div id="test"></div>

 <div id="test-scale"></div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Chrome background-image transition demo
	*/

	div {
	float: left;
	height: 300px;
	transition: all .5s ease-out;
	width: 300px;
	}

	#test {
	background: transparent url('http://placekitten.com/300/300') no-repeat 0 0;
	}

	#test:hover {
	background-image: url('http://placekitten.com/g/300/300');
	}

	#test-scale {
	background: transparent url('http://placekitten.com/300/300') no-repeat center center;
	}

	#test-scale:hover {
	background-image: url('http://placekitten.com/g/250/250');
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="test"></div>

	<div id="test-scale"></div>