A CodePen by Marco Barría. CSS Curtain - INPUT and :CHECKED

index.html

<!-- 
  Autor: Marco Barría
  http://www.flickr.com/photos/marcobarria/5802468782/in/photostream
-->

<input type="checkbox"/>
<div id="izq"></div><div id="der"></div>
<h1>Lorem Ipsum</h1>

style.css

html, body{
  height:100%;
  overflow:hidden;
}

body{
  background-color: #222;
  font:75% normal "Helvetica";
}

input[type="checkbox"] {
  background: rgba(255,255,255,.1);
  border-radius:100%;
	cursor:pointer;
  display: block;
	position:absolute;
	top:30px;
	left:50%;
  margin-left:-20px;
  width:40px;
	height:40px;
	appearance: none;
	transition: all cubic-bezier(.9,.9,.8,1.1) .4s;
	z-index:10;
}

input[type="checkbox"]:hover {
  background: rgba(180,0,0,1);
}

input[type="checkbox"]:after{
  color:#fff;
  content:'+';
	font:2em bold;
	position:absolute;
	line-height:37px;
	padding-left:13px;
}

input[type="checkbox"]:checked{
	background: rgba(180,0,0,1);
	transform:rotateZ(405deg);
}

input[type="checkbox"]:checked ~ #izq{
	transform:translateX(-50%);
}

input[type="checkbox"]:checked ~ #der{
	transform:translateX(50%);
}

/* modifique transition: "all" por "transform" // creditos Fork: http://codepen.io/bfeelyweb/details/AuJaz#forkline de  Bennett Feely */

#izq, #der{
  transition: transform ease-in-out .4s;
}

#izq{
	background:url(http://f.cl.ly/items/3c0k3N320S0c3K2f0i3s/vulcano_izq.jpg) no-repeat top right;
  position:absolute;
	width:50%;
	height:100%;
  z-index:5;
}

#der{
	background:url(http://f.cl.ly/items/0n423z3H2h3a1X222P1q/vulcano_der.jpg) no-repeat left top;
	position:absolute;
  left:50%;
	width:50%;
	height:100%;
  z-index:5;
}

h1{
	color:#111;
	text-shadow: 0px 1px 1px #4d4d4d;
	font-size:3em;
	text-align:center;
	position:absolute;
	top:50%;
	width:100%;
}