Cacher is the code snippet organizer for pro developers

<style>
.grid { 
  width:400px;
  height:400px;
  display: inline-block;
  background:url("https://s-media-cache-ak0.pinimg.com/736x/eb/78/71/eb78710049d2ed82a39f6bbace485515.jpg");
  background-size:0;
  background-repeat:no-repeat;
}
.grid>div {
  display:inline-block;
  width:48%;
  height:48%;
  background:inherit;
  background-size:200% 200%;
}
#first{}
#second{  background-position-x:100%;}
#third {  background-position-y:100%;}
#fourth{  background-position-x:100%; background-position-y:100%;}

.grid>div:hover {
  transform:scale(1.05,1.05);
  outline: solid white 5px;
}
</style>

<div class="grid">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
</div>