Display text box with information of product on hovering in shopify

Actually i am new to shopify and want to show up textbox with information of current product on hovering in collection page. please some one help me with it . Thankyou in advance just like image bellow of https://www.peterengland.com/

click here for image

Solution

.product{
  width:200px;
  height:230px;
}
.product img{
  width:inherit;
  height:200px;
  object-fit:cover;
  object-position:center;
}
.product .info{
  position:absolute;
  width:inherit;
  height:inherit;
  background-color:rgba(0,0,0,0.6);
  color:#ffffff;
  
  display:flex;
  justify-content:center;
  align-items:center;
  
  max-height:0vh;
  overflow:hidden;
  transition:0.6s;
}


.product:hover .info{
  max-height:100vh;
}

<div class="product">
  <div class="info">
    <div>
      <big>Price 0$</big>
    </div>
  </div>
  <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Lamborghini/Aventador/6721/Lamborghini-Aventador-SVJ/1621849426405/front-left-side-47.jpg">
  <big>Car</big>
</div>