<a class="">
  <div class="box">
    <div class="icon">
      <i class="fa-solid fa-house"></i>
    </div>
    <p class="icon-title">홈</p>
    <div class="text-box">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </div>
</a>

a{
  display:block;
}
.box{
  width: 300px;
  height: 100px;
  margin: 30px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s;
  overflow:hidden;
}
.box:hover{
  background: #ccc;
}
.icon{
  position:relative;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 24px
}
.icon::before{
  content:'';
  position:absolute;
  display: block;
  top:0;
  left:0;
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index:-99;
  border-radius: 100%;
  
}
.box:hover .icon::before{
  animation: hoverbox 0.5s forwards;
}
@keyframes hoverbox{
  0%{ transform: scale(1,1); }
  100%{ transform: scale(10,10); }
}
.box:hover .icon-title{
  opacity:0;
}
.icon-title{
  opacity:1;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 600;
  text-align:center;
  transition: all 0.1s;
}
.box:hover .text-box{
  opacity:1;
  transform: translateY(-25px);
}
.text-box{
  opacity:0;
  transition: all 0.2s;
}