HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="animation22.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="icon"><i class="fa fa-map-marker"></i>Our Location</div>
<div class="details">India</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-phone"></i>Call Us</div>
<div class="details">+91 987 654 2589</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-envelope"></i>Write Us</div>
<div class="details">Info@gmail.com</div>
</div>
</div>
</body>
</html>
CSS CODE:
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: sans-serif;
background: #e91e63;
}
.container{
width: 100%;
height: 300px;
background: #fffc93;
display: flex;
justify-content: center;
align-items: center;
}
.container .box{
position: relative;
width: 300px;
height: 100px;
box-sizing: border-box;
text-align: center;
border-right: 1px solid rgba(0,0,0,.2);
color: #795548;
overflow: hidden;
}
.container .box:last-child{
border:none;
}
.container .box .icon{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size:28px;
transition: .5s;
}
.container .box .icon .fa{
padding-right: 10px;
transition: .5s;
}
.container .box:hover .icon{
transform: translateY(-100%);
}
.container .box:hover .icon .fa{
transform: translateY(100px);
font-size: 80px;
opacity: .1;
transition-delay:.5s;
z-index: -1;
}
.container .box .details{
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transform: translateY(100%);
transition: .5s;
font-size: 28px;
}
.container .box:hover .details{
transform: translateY(0);
}
TrueCodes 
Leave a comment