如何在 bigcartel“整洁”主题上为产品图片添加悬停效果

Question

我想在我的产品图片上创建一个悬停效果，像这样轻弹到第二张图片：

.product-img-wrapper img:last-of-type {
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}

我需要在我的代码中添加什么以及我应该把它放在哪里？我正在使用 bigcartel 的“Neat”主题。

谢谢！

Answer 1

你写的是初始状态。不确定悬停时要发生什么。假设您希望图像的悬停状态可见。代码是：

.product-img-wrapper img:last-of-type:hover {
    opacity: 1;
    visibility: visible;
}