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

Question

实际上我是 shopify 的新手，希望在悬停在 collection 页面时显示包含当前产品信息的文本框。请有人帮助我。先感谢您就像下面的 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://stimg.cardekho.com/images/carexteriorimages/930x620/Lamborghini/Aventador/6721/Lamborghini-Aventador-SVJ/1621849426405/front-left-side-47.jpg">
  <big>Car</big>
</div>

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

Display text box with information of product on hovering in shopify

css

hover

liquid

e-commerce

shopify