glorialangreo · May 22, 2012 11:29
diff --git a/dabblet.css b/dabblet.css
 /**
 * The first commented line is your dabblet’s title
 */

 .test {
 height:100px;
 width:100px;
 border: 2px solid #CCC;
 border-radius:300px;
 background:url('http://www.truetop10.com/wp-content/uploads/2012/03/sleepy-and-tired-cute-beige-cat.jpg.pagespeed.ce.86ZeICh_1f.jpg') no-repeat 50% 50%;
 }

 .test:hover {
 -webkit-transform-origin: bottom center;
 -webkit-transition-property: width, height;
 -webkit-transition: 0.5s ease-in-out;
 width:300px;
 height:300px;
 }

diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->


 <div class="test"></div>
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* The first commented line is your dabblet’s title
	*/

	.test {
	height:100px;
	width:100px;
	border: 2px solid #CCC;
	border-radius:300px;
	background:url('http://www.truetop10.com/wp-content/uploads/2012/03/sleepy-and-tired-cute-beige-cat.jpg.pagespeed.ce.86ZeICh_1f.jpg') no-repeat 50% 50%;
	}

	.test:hover {
	-webkit-transform-origin: bottom center;
	-webkit-transition-property: width, height;
	-webkit-transition: 0.5s ease-in-out;
	width:300px;
	height:300px;
	}
	<!-- content to be placed inside <body>…</body> -->


	<div class="test"></div>