如何解决在shopify中显示带有产品信息的文本框
实际上,我是不熟悉Shopify的新手,并且想在收藏页上悬停时显示带有当前产品信息的文本框。请有人帮助我。先感谢您 就像https://www.peterengland.com/
的波纹管一样解决方法
.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.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。