<div class="tab-wrapper">
      <div class="tab-item">
        <div class="search-box">
          <a href="#">1</a>
        </div>
      </div>
      <div class="tab-item">
        <div class="search-box">
          <a href="#">1</a>
        </div>
      </div>
      <div class="tab-item">
        <div class="search-box">
          <a href="#">1</a>
        </div>
      </div>
      <div class="tab-item">
        <div class="search-box">
          <a href="#">1</a>
        </div>
      </div>
      <br>
      <div class="tab-item">
        <div class="search-box">
          <a href="#">1</a>
        </div>
      </div>
      <div class="tab-item">
        <div class="search-box">
          <a href="#">1</a>
        </div>
      </div>
      <div class="tab-item">
        <div class="search-box">
          <a href="#">1</a>
        </div>
      </div>
      <div class="tab-item">
        <div class="search-box">
          <a href="#">1</a>
        </div>
      </div>
      <input type="button" class="btn-load" value="load more work"/>
    </div>

.tab-wrapper{
  width: 100%;
  position: relative;
  right: 0;
}

.tab-wrapper .tab-item{
  width: 25%;
  height: 300px;
  float: left;
  background: #838383;
  overflow: hidden;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}
.tab-wrapper>div:nth-child(2),
.tab-wrapper>div:nth-child(4),
.tab-wrapper>div:nth-child(6),
.tab-wrapper>div:nth-child(8){
  background: #dddddd;
}
.search-box{
  background: black;
  cursor: pointer;
  height: 300px;
  display: none;
}
/*.tab-wrapper>div:hover{
  background: black;
}*/
.btn-load{
  width:100%;
  height: 100px;
  border: none;
  background: #f5f5f5;
  font-size: 0.7em;
  text-transform: uppercase;
  color:#8e8e8e;
  font-weight: bold;
}

 document.getElementByClass('tab-wrapper').onmouseover=
    function(event){
      var target = event.target;
      if(target.className == 'tab-item'){
        var s = target.getElementsByClassName('search-box');
        closeMenu();
        s[0].style.display='block';
      }
    }

    document.onmousemove=function(event){
      var target = event.target;
      console.log(event.target);
      if(target.className != 'tab-item' && target.className != 'search-box'){
        closeMenu();
      }
    }

    function closeMenu(){
      var menu = document.getElementByClass('tab-wrapper');
      var subm = document.getElementByClassName('search-box');
      for(var i = 0; i < subm.length; i++){
          subm[i].style.display="none";
      }
    }