在 Shopify 中悬停时显示带有产品信息的文本框

【问题标题】：Display text box with information of product on hovering in shopify在 Shopify 中悬停时显示带有产品信息的文本框
【发布时间】：2020-10-09 00:03:40
【问题描述】：

实际上，我是 shopify 的新手，想在收藏页面上悬停时显示带有当前产品信息的文本框。请有人帮助我。先感谢您就像https://www.peterengland.com/下面的图片一样

click here for image

【问题讨论】：

标签： css hover shopify e-commerce liquid

【解决方案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://stimg.cardekho.com/images/carexteriorimages/930x620/Lamborghini/Aventador/6721/Lamborghini-Aventador-SVJ/1621849426405/front-left-side-47.jpg">
  <big>Car</big>
</div>

【讨论】：