在shopify中显示带有产品信息的文本框

Question

实际上，我是不熟悉Shopify的新手，并且想在收藏页上悬停时显示带有当前产品信息的文本框。请有人帮助我。先感谢您 就像https://www.peterengland.com/

的波纹管一样

click here for image

Answer 1

.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://lh3.googleusercontent.com/proxy/sFW9rUCQx_aeoiY658cbXamDYbYadFFDmkGpMWx5D95c-I9qI7vFg2eEKk3tqXXg9MmkFMeXtBjkpBB0oSmxaZ3Me94gis5f5hkJXgec1XWv2buBpH7sRT1PVQ-QrX-DW8AVgZbqhAPi">
  <big>Car</big>
</div>