SirPepe · August 14, 2013 13:00
diff --git a/dabblet.css b/dabblet.css
 /**
 * Vorhang-Effekt (Lösung)
 */

 /* Container */
 #Box {
  position: relative;
  background:blue;
  color: blue;
  text-align: center;
  padding: 3em;
  font-size: 2em;
 }

 /* Vorhänge */
 #Box div {
  background: red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
 }
 #Box div:last-child {
  left: 50%;
  right: 0;
 }

 /* Zustände */
 #Box:hover {
  color: yellow;
 }
 #Box:hover div:first-child {
  right: 100%;
 }
 #Box:hover div:last-child {
  left: 100%;
 }

 /* Transition-Eigenschaften */
 div {
  transition-property: color, left, right;
  transition-duration: 2s;
 }
 #Box {
  transition-delay: 2500ms;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <div id="Box">
  <div></div>
  Hallo Welt!
  <div></div>
 </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"}
	/**
	* Vorhang-Effekt (Lösung)
	*/

	/* Container */
	#Box {
	position: relative;
	background:blue;
	color: blue;
	text-align: center;
	padding: 3em;
	font-size: 2em;
	}

	/* Vorhänge */
	#Box div {
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 50%;
	}
	#Box div:last-child {
	left: 50%;
	right: 0;
	}

	/* Zustände */
	#Box:hover {
	color: yellow;
	}
	#Box:hover div:first-child {
	right: 100%;
	}
	#Box:hover div:last-child {
	left: 100%;
	}

	/* Transition-Eigenschaften */
	div {
	transition-property: color, left, right;
	transition-duration: 2s;
	}
	#Box {
	transition-delay: 2500ms;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div id="Box">
	<div></div>
	Hallo Welt!
	<div></div>
	</div>