<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');
})