<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.