JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="apDiv1">
</div>
<header>
<div class="menubar one">
<img class="icon" src="icon.png" alt="Homeicon" width="42" height="42">
<p class="label">Home</p>
</div>
<div class="menubar two">
<img class="icon" src="image" alt="web" width="42" height="42">
<p class="label">About us</p>
</div>
</header>
</body>

CSS

#apDiv1 {
	position:absolute;
	width:997px;
	height:1087px;
	z-index:1;
	top: 0px;
}
header{
	margin:240px;
	margin-left:57px;
	width:1080px;
	height:500px;	
  z-index: 10
position: relative;
	
}
div.menubar{
	width: 180px; height: 210px;
	float: left;
	transition:height .4s;
}

div.one{
	background-color: LightSteelBlue;
}
div.two{
	background-color:LightBlue;
 }
img.icon{
	display: block;
	     width: 40px;
	     margin:40px auto;
	     padding: 20px;
	     background: rgba(255,255,255,.3);
	     border-radius: 50%;
	     box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
	     transition: box-shadow  .4s;
		 
}
p.label{
	font-size: 1.1em;
	color:black;
	text-align: center;
	opacity: .6s;
	padding-top:  10px;
	transition:  padding-top .4s;
	background-color:#0099FF
}

div.menubar:hover {
	height: 230px;
}
a {
     text-decoration: none ;
  }

div.menubar:hover p.label{
	padding-top: 30px; opacity: 1;
}
div.menubar:hover img.icon{
	box-shadow: 0px 0px 0px 0px rgba(255,255,255,.7);
}