<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
.box {
display: inline-block;
float: left;
height: 150px;
overflow: hidden;
width: 20%;
-webkit-transition: width 1.2s;
-moz-transition: width 1.2s;
transition: width 1.2s;
}
.box.books {
background-color: #1c87c9;
}
.box.quizzes {
background-color: #666666;
}
.box.snippets {
background-color: #e6ae2e;
}
.box.tools {
background-color: #8ebf42;
}
.box.functions {
background-color: #eb4034;
}
.box a {
color: #eeeeee;
text-decoration: none;
text-align: center;
vertical-align: middle;
height: 100%;
display: block;
padding-top: 20px;
}
.box span {
display: block;
position: relative;
top: 100%;
text-align: center;
-webkit-transition: top 1s;
-moz-transition: top 1s;
transition: top 1s;
}
.nav:hover .box {
width: 10%;
}
.nav .box:hover {
width: 60%;
}
.box:hover span {
top: 25%;
}
</style>
</head>
<body>
<div class="nav">
<div class="box books">
<a href="#books">BOOKS
<span>
<i class="fas fa-book"></i>
</span>
</a>
</div>
<div class="box quizzes">
<a href="#quizzes">QUIZZES
<span>
<i class="fas fa-check"></i>
</span>
</a>
</div>
<div class="box snippets">
<a href="#snippets">SNIPPETS
<span>
<i class="fas fa-chalkboard-teacher"></i>
</span>
</a>
</div>
<div class="box tools">
<a href="#tools">TOOLS
<span>
<i class="fas fa-tools"></i>
</span>
</a>
</div>
<div class="box functions">
<a href="#functions">STRING FUNCTIONS
<span>
<i class="fas fa-file-alt"></i>
</span>
</a>
</div>
</div>
</body>
</html>