<div class="container">
<div id="box1" class="box" data-bg="#bg1">rooftops</div>
<div id="box2" class="box" data-bg="#bg2">streetstyle</div>
<div id="box3" class="box" data-bg="#bg3">citylife</div>

<div id="bg1" class="bg"></div>
<div id="bg2" class="bg"></div>
<div id="bg3" class="bg"></div>
</div>

<!-- 
just hover the boxes to see the bigger picture. ;)

images borrowed from http://www.makersquarter.com/, which gave me the idea to try this.

-->

body { background:#ccc; margin:0; }
.container { /*width:1000px; margin:0 auto; position:relative;*/ } 

.bg { 
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background-position:50% 50%;
  background-size:cover;
  z-index:1;
} 
.bg.reveal { -webkit-clip-path:none !important; z-index:2; }

.box { 
  width:200px;
  height:200px;
  border:15px solid #fff;
  position:relative;
  z-index:10; 
  float:left;
  line-height:200px;
  text-align:center;
  color:#fff;
  font-size:20px;
  text-transform:uppercase;
  font-family:Tahoma;
  letter-spacing:1px;
}

#bg1 { 
  background-image:url('http://www.makersquarter.com/images/uploads/homepage/Home-Page-04.jpg');
  -webkit-clip-path:rectangle(15px,15px,200px,200px); }

#bg2 { 
  background-image:url('http://www.makersquarter.com/images/uploads/homepage/Home-Page-03.jpg');
  -webkit-clip-path:rectangle(260px,15px,200px,200px); }

#bg3 { 
  background-image:url('http://www.makersquarter.com/images/uploads/homepage/Home-Page-02.jpg');
  -webkit-clip-path:rectangle(505px,15px,200px,200px); }

#box1 { left:0px; }
#box2 { margin-left:15px; }
#box3 { margin-left:15px; }

$('.box').hover(function(){
  $($(this).data('bg')).addClass('reveal');
}, function(){
  $($(this).data('bg')).removeClass('reveal');
});