Menu aside style01 slide out

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MENU ASIDE STYLE01 SLIDE OUT | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="MENU ASIDE STYLE01 SLIDE OUT">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <ul class="icon-menu">
      <li class="icon-box home">
        <i class="fa fa-home fa-4x"></i>
        <a href="#">
          <h2>Home</h2>
        </a>
      </li>	
      <li class="icon-box about"> 
        <i class="fa fa-paint-brush fa-4x"></i>
        <a href="#">
          <h2>About</h2>
        </a>
      </li>
      <li class="icon-box service"> 
        <i class="fa fa-code fa-4x"></i>
        <a href="#">
            <h2>Service</h2>
        </a>
      </li>
      <li class="icon-box product"> 
        <i class="fa fa-shopping-cart fa-4x"></i>
        <a href="#">
          <h2>Products</h2>
        </a>
      </li>
      <li class="icon-box contact"> 
        <i class="fa fa-envelope fa-4x"></i>
        <a href="#">
          <h2>Contact</h2>
        </a>
      </li>
    </ul>
  </div>
</div>    
</body>
</html>



@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);

body {
font-family: 'Lato', sans-serif;
background: #ecf0f1; 
}

a{ text-decoration: none; }
h2 {  color: #fff; 
	font-size: 22px; 
	margin: 0 24px;
	font-weight: 300;
}


/*= ICON BOXES
--------------------------------------------------------*/

ul.icon-menu {margin-top: 16px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #2b99ce;}
li.icon-box.about {background: #24cccd;}
li.icon-box.service {background: #9a639a;}
li.icon-box.product {background: #c44745;}
li.icon-box.contact {background: #2d9a63;}

.icon-box h2{font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}

.icon-box a {
	display: block;    
	padding: 0;
  width: 120px;
  height: 120px;
}


i.fa {
  position:absolute;
  pointer-events:none;
  color:white ;
  margin:16px 0 0 14px;
}



/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.home h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #2b99ce; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
		border-left: 3px solid #247eaa;
		
}

.icon-box.home a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	
}

.icon-box.about h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #24cccd; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
    border-left: 3px solid #1da7a8;
}

.icon-box.about a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	
}


.icon-box.service h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #9a639a; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #6d466d;
}

.icon-box.service a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	 
}


.icon-box.product h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #c44745; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #9b3735;
}

.icon-box.product a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	 
}

.icon-box.contact h2 { 
	 z-index: -999;
	 position: absolute; 
	 top: 0; 
	 left: 0; 
	 opacity: 0; 
	 background: #2d9a63; 
	 line-height: 120px; 
	 width: 120px; 
	 -webkit-transition: all  .3s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	border-left: 3px solid #1e6b44;
}

.icon-box.contact a:hover h2 { 
	opacity: 1; left: 120px; margin: 0;
	text-align: center;
	 
}



/*= MENU ICONS
--------------------------------------------------------*/


span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}

.icon-box a {
    padding: 120px;
}

.icon-menu i {
		border-radius: 50%;
		box-shadow: 0 0 0 50px transparent;
    padding: 0.2em 0.25em;
		background: rgba(255,255,255,0.1);
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: box-shadow .6s ease-in-out;
		-moz-transition: box-shadow .6s ease-in-out;
		-o-transition: box-shadow .6s ease-in-out;
		-ms-transition: box-shadow .6s ease-in-out;
		transition: box-shadow .6s ease-in-out;
	}

.icon-menu li:hover i,
.icon-menu li:active i,
.icon-menu li:focus i {		
		box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
		-webkit-transition: box-shadow .4s ease-in-out;
		-moz-transition: box-shadow .4s ease-in-out;
		-o-transition: box-shadow .4s ease-in-out;
		-ms-transition: box-shadow .4s ease-in-out;
		transition: box-shadow .4s ease-in-out;
}