<!-- Based on this awesome site. http://blacknegative.com/#!/bullittagency/ -->


<div class="block-wrap">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block">H</div>
  <div class="block">O</div>
  <div class="block">V</div>
  <div class="block">E</div>
  <div class="block">R</div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block">O</div>
  <div class="block">V</div>
  <div class="block">E</div>
  <div class="block">R</div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block">M</div>
  <div class="block">E</div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500);
*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
body{
  font-family:"Ubuntu", sans-serif;
  background:#000;
}
.block-wrap{
  background:url(https://i.imgur.com/DLVlffs.jpg);
  background-size:100% 100%;
  width:100%;
  overflow:hidden;
}
.block{
  display:inline-block;
  float:left;
  color:#fff;
  width:10%;
  padding:5%;
  line-height:0;
  background:#000;
  -webkit-transition:all 0.2s ease-in;
  -webkit-transition-delay:0.4s;
  -moz-transition:all 0.2s ease-in;
  -moz-transition-delay:0.4s;
  transition:all 0.2s ease-in;
  transition-delay:0.4s;
  text-align:center;
}
.off{
  opacity:0;
  -webkit-transition:none;
   -moz-transition:none;
   transition:none;

}

$(function(){
  $(".block").hover(function(){
    $(this).addClass("off");

  });
  $(".block").mouseout(function(){
    $(this).removeClass("off");

  });
  
  
  
});