<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"> <div class="container"> <div class="row"> <div class="wrapper"> <div class="menu"> <i class="fas fa-bars"></i> <span> <a href="#">home</a><br> <a href="#">About</a><br> <a href="#">Work</a><br> </span> </div> </div> </div> </div>

.wrapper { width: 780px; margin: 0 auto; background: #000; height: 350px; text-align: center; } .menu { width: 50px; height: 50px; line-height: 50px; border: 0px solid #333; display: inline-block; margin: 15% auto; transition: all 0.8s ease-in-out; background: #fff; cursor: pointer; } .menu span { visibility: hidden; opacity: 0; transition: all 0.8s ease-in-out; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; line-height: 12px; font-size: 8px; padding: 5px; } .menu:hover span{ visibility:visible; opacity:1; box-shadow: 0px 12px 16px -12px #666; } .menu span a { color:#333; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease-in-out; } .menu span a:hover { text-shadow: 0 0.3px 0.2px #000; } .menu:hover { transform: rotate(720deg) scale(2); } .menu i{ visibility: visible; opacity: 1; transition: all 0.8s ease-in-out; } .menu:hover i{ visibility: hidden; opacity: 0; }

/****no javascript require ***/