<div class="container">
   <div class="hexagon">
      <div class="shape">
         
      </div>
      <div class="content">
         <div class="title">Manav Shah</div>
         <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ea hic temporibus cum ut voluptate voluptatum rerum nulla voluptates tempora, distinctio similique ab corporis at nesciunt vel unde asperiores quas.
         </div>
      </div>
   </div>
   <div class="hexagon">
      <div class="shape"></div>
      <div class="content">
         <div class="title">Manav Shah</div>
         <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ea hic temporibus cum ut voluptate voluptatum rerum nulla voluptates tempora, distinctio similique ab corporis at nesciunt vel unde asperiores quas.
         </div>
      </div>
   </div>
   <div class="hexagon">
      <div class="shape"></div>
      <div class="content">
         <div class="title">Manav Shah</div>
         <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, ea hic temporibus cum ut voluptate voluptatum rerum nulla voluptates tempora, distinctio similique ab corporis at nesciunt vel unde asperiores quas.
         </div>
      </div>
   </div>
</div>

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   
}
.container {
   position: relative;
   display: flex;
   align-items:center;
   justify-content: center;
   flex-wrap: wrap;
}
.container .hexagon {
   position: relative;
   width: 320px;
   height: 300px;
   margin: 60px 10px;
}

.container .hexagon::before {
   position: absolute;
   content: '';
   bottom: -50px;
   border-radius: 50%;
   width: 100%;
   height: 50px;
   background: radial-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.01),transparent);
   transition: 0.4s;
   opacity: 0.9;
}
.container .hexagon:hover .shape {
   transform: translatey(-25px);
}
.container .hexagon:hover::before {
   transform: scale(0.75);
   opacity: 0.8;
}

.container .hexagon .shape {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url("https://images.unsplash.com/photo-1578952258885-6ee0651294e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bW91bnRhaW4lMjBhZHZlbnR1cmV8ZW58MHx8MHx8&w=1000&q=80");
   background-size: cover;
   clip-path: polygon(25% 0, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
   transition: 0.4s;
}
.content {
   position: absolute;
   top: 0;
   left: 0;
   font-size: 0.8rem;
   width: 100%; height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 30px;
   color: rgba(255,255,255,0.8);
   text-align: center;
   background-color: rgba(0,0,0,0.5);
   opacity: 0;
   transition: 0.4s;
   clip-path: polygon(25% 0, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.container .hexagon:hover .content {
   transform: translatey(-25px);
   opacity: 1;
}
.container .hexagon .content .title {
   margin-bottom: 10px;
   font-weight: 500;
   font-size: 1.5rem;
}