html - 图像变暗并缩放文本

Question

我有一张图片，上面有一些文字。当我将鼠标悬停在图像上时，我希望图像变暗并放大。这工作正常，但我遇到的问题是图像上的文本也会随着图像变暗而变暗。我不希望文字与图像一起变暗。我怎样才能做到这一点？

检查 this Bootply对于代码

注意 :图像被放置为包含我的文本的 div 的背景

Answer 1

发生这种情况是因为您在父包装器上设置了 opacity: .444;，这也适用于所有子包装器。

我不会调整不透明度，而是使用伪元素淡入叠加层并将 z-index 添加到文本包装器以使其保持在叠加层之上。

.hovereffect .overlay2 {
  /* your styles here */
  z-index: 1;
}

.hovereffect:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

然后在悬停时，将不透明度设置为 1。

.hovereffect:hover:after { opacity: 1; }