<div class="image">
		
		<div></div>
		<div></div>
		<div></div>
	</div>

<p>By <a href="https://twitter.com/JesGraPa" target="_blank">@JesGraPa</a> - <a href="https://codepen.io/JesGraPa/" target="_blank">More Pens</a></p>
<br><br>
*{
			box-sizing: border-box;
			margin:0;
			padding:0;
			text-align: center;
			color: #C9C9BE;
		}
		body{ background: #495554 }
		.image{
			margin:30px auto;
			width: 480px;
			height: 360px;
			border:5px solid #878D86;
			
		}
		.image div{
			width: 50%;
			height: 50%;
			float: left;
			background-image: url("https://s-media-cache-ak0.pinimg.com/originals/44/d3/7d/44d37d019f3b00845209b105c1497535.jpg");
			border:5px solid #878D86;
			transition:all 0.2s;
			background-size: 200% auto;
		}
		.image div:nth-child(1){
			background-position: left top;
		}
		.image div:nth-child(2){
			height: 100%;
			background-position: right;
			float: right;
			background-size: 200% 100%;
		}
		.image div:nth-child(3){
			background-position: left bottom;
		}
		.image:hover div{
			border:0 solid #878D86;
		}
		.image:hover {
			border:0 solid #878D86;
		}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.