<div id="page">
	<div class="banner">
		<div class="background image1">
		</div>
		<div class="crop">
			<div class="background image2">
			</div>
		</div>
		<div class="title">
			<h1>Title</h1>
		</div>
	</div>

	<div class="content">
		<p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare
			sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id
			ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
		<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque
			nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
	</div>
</div>

body {
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	background: #000;
	color: #fff;
}

div .banner, div .background {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 240px;
}

div .title {
	position: relative;
	top: 100px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
}

div .background {
	position: absolute;
	background-size: cover;
	background-position: center center;
	z-index: 10;
}

.image1 {
	background-image: url("http://iaian7.com/images/photoshop/anaglyph/composite-colorcode.jpg");
}

.image2 {
	background-image: url("http://iaian7.com/images/photoshop/anaglyph/composite-trioscopic.jpg");
	-webkit-transition-duration: 960ms;
	-moz-transition-duration: 960ms;
	-ms-transition-duration: 960ms;
	-o-transition-duration: 960ms;
	transition-duration: 960ms;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-clip-path: polygon(40% 0%, 50% 0%, 60% 100%, 50% 100%);
}

.image2:hover {
	-webkit-clip-path: polygon(10% 0%, 80% 0%, 90% 100%, 20% 100%);
}

div .content {
	width: 50%;
	margin: auto;
}