html - 奇怪的悬停效果

Question

我试图在您悬停时在我的产品上显示标题。我设法得到它，但黑色不会显示黑色，就像我在效果之上有某种白色背景一样。可以看看there

这是我添加的 CSS

.product:hover .reveal img { 不透明度:1； z-索引:1；

.reveal .hidden {
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: -20px;
}

.reveal:hover .hidden {
    z-index: 1;
    opacity: 1;
}

.reveal .caption {
    position: absolute;
    top: 0;
    display: table;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1) !important;
    font: 12px/1.4em sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-align: center;
}

.reveal .hidden .caption .centered {
    display: table-cell;
    vertical-align: middle;
}  

您认为它是像 z-index 问题一样基本，还是更符合我构建它的方式？

Answer 1

那是因为你有一个 hover 效果将 .image-wrapper 动画化为 opacity:0.5。如果你设置 .product-grid .image-wrapper {opacity:1 !important)(只是为了测试你可以看到黑色是黑色。

那你能做什么？

对 .reveal > img 做淡出效果。这样，.product-grid .image-wrapper 将保持 opacity:1。