<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

<div class="frame">
  <div class="boxes">
    <div class="box one">
      <span class="text">Contact</span>
      <span class="icon"><i class="fas fa-envelope"></i></span>
    </div>
    <div class="box two">
      <span class="text">Portfolio</span>
      <span class="icon"><i class="fas fa-star"></i></span>
    </div>
    <div class="box three">
      <span class="text">About</span>
      <span class="icon"><i class="fas fa-info-circle"></i></span>
    </div>
    <div class="box four">
      <span class="text">Home</span>
      <span class="icon"><i class="fas fa-home"></i></span>
    </div>
  </div>
</div>

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300i');
body {
  background: #201c29;
}
// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: .5rem 1rem 1rem rgba(0,0,0,0.6);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: 'Fira Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.boxes {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
}
.boxes .box {
  position: relative;
  flex: 1 1 auto;
  width: 20%;
  transition: all .5s ease-in-out;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  box-shadow: .2rem 0 .2rem rgba(0, 0, 0, .6);
}
.boxes .box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 2rem;
  color: transparent;
  transition: all .5s ease-in-out;
}
.boxes .box.one {
  background: rgb(39%, 23%, 38%);
  .text {
    margin-left: 1rem;
  }
}
.full {
  width: 400px;
}
.hide {
  width: 0;
}
.boxes .box.two {
  background: rgb(39%, 23%, 48%);
  .text {
    margin-left: 1rem;
  }
}
.boxes .box.three {
  background: rgb(39%, 23%, 58%);
}
.boxes .box.four {
  background: rgb(39%, 23%, 68%);
  width: 80%;
  .text {
    transform: translate(-50%, -50%) scale(1);
    color: white;
    margin-left: 1rem;
  }
}
.boxes .box:hover {
  width: 100%;
  .text {
    color: #fff;
    transform: translate(-50%, -50%) scale(1);
  }
  .four {
    opacity: 0;
    color: transparent;
    transform: translate(-50%, -50%) scale(0);
  }
}
.box .icon {
  color: white;
  align-self: center;
  font-size: 2rem;
  padding-left: 1.3rem;
}

// jQuery v3.3.1 is supported
$('.box .one').click(function() {
  $(this).toggleClass('full');
  $('.two').toggleClass('hide');
  $('.three').toggleClass('hide');
  $('.four').toggleClass('hide');
})