schadeck · May 14, 2012 17:10
diff --git a/dabblet.css b/dabblet.css
 /**
 * CSS3 Auto Scroll
 */


 .container {
 	width:400px; 
 	height:500px;
 	overflow: auto;
 	background:green;
 	margin: 1em auto;
 	padding: 0;
 } 

 .container div {
 	margin-top: -100%;
 	transition: margin-top 10s linear;
 	padding: 1em;

 }
 .container div:hover {
 	margin-top: 0;
 	transition: margin-top 0.3s linear;
 }

 .container img {
 	float: left;
 	margin: 0 1em 1em 0
 }



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

 <div class="container">
 	<img src="http://placehold.it/200x300" />
 	<div class="scrollUp">    
 		<span>This example has: Autoscrolls the text upward using a CSS3 transition on margin-top for the child div.<br><br>The Parent div is given a height and width along with an overflow of auto.<br><br>Also add a shorter length transition to the hover and set the margin-top to 0 to snap it back to the original postion.<br><br>Another option is to use JS to simply swap classes on click to make the position resent permanent.<br><br>Cosby sweater PBR raw denim occupy terry richardson, tofu cardigan fingerstache lo-fi twee small batch you probably haven't heard of them pork belly cray portland.<br><br>Mixtape brunch mustache sartorial farm-to-table marfa. <br><br>Photo booth skateboard sriracha, pour-over lomo letterpress iphone PBR ethical mixtape trust fund leggings kale chips. <br><br>Cray williamsburg gluten-free, godard artisan occupy quinoa twee craft beer sartorial swag portland food truck. <br><br>Cosby sweater vice mcsweeney's mustache, gluten-free thundercats chillwave wolf williamsburg wes anderson. <br><br>Pitchfork wolf chambray echo park, you probably haven't heard of them messenger bag flexitarian odd future raw denim PBR mumblecore fixie fanny pack. <br><br>Ennui biodiesel trust fund, swag vegan +1 mcsweeney's mumblecore selvage echo park cliche pork belly PBR wes anderson.
 	</div>


diff --git a/settings.json b/settings.json
 {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* CSS3 Auto Scroll
	*/


	.container {
	width:400px;
	height:500px;
	overflow: auto;
	background:green;
	margin: 1em auto;
	padding: 0;
	}

	.container div {
	margin-top: -100%;
	transition: margin-top 10s linear;
	padding: 1em;

	}
	.container div:hover {
	margin-top: 0;
	transition: margin-top 0.3s linear;
	}

	.container img {
	float: left;
	margin: 0 1em 1em 0
	}
	<!-- content to be placed inside <body>…</body> -->

	<div class="container">
	<img src="http://placehold.it/200x300" />
	<div class="scrollUp">
	<span>This example has: Autoscrolls the text upward using a CSS3 transition on margin-top for the child div.<br><br>The Parent div is given a height and width along with an overflow of auto.<br><br>Also add a shorter length transition to the hover and set the margin-top to 0 to snap it back to the original postion.<br><br>Another option is to use JS to simply swap classes on click to make the position resent permanent.<br><br>Cosby sweater PBR raw denim occupy terry richardson, tofu cardigan fingerstache lo-fi twee small batch you probably haven't heard of them pork belly cray portland.<br><br>Mixtape brunch mustache sartorial farm-to-table marfa. <br><br>Photo booth skateboard sriracha, pour-over lomo letterpress iphone PBR ethical mixtape trust fund leggings kale chips. <br><br>Cray williamsburg gluten-free, godard artisan occupy quinoa twee craft beer sartorial swag portland food truck. <br><br>Cosby sweater vice mcsweeney's mustache, gluten-free thundercats chillwave wolf williamsburg wes anderson. <br><br>Pitchfork wolf chambray echo park, you probably haven't heard of them messenger bag flexitarian odd future raw denim PBR mumblecore fixie fanny pack. <br><br>Ennui biodiesel trust fund, swag vegan +1 mcsweeney's mumblecore selvage echo park cliche pork belly PBR wes anderson.
	</div>