将悬停时的叠加颜色添加到背景图像[重复]

Question

我知道这是一个超级基本的概念，但我在绕圈子。我有一个顶部有文字的背景图片。所以图像是父元素。当用户将鼠标悬停在图像上时，我希望有一个比我使用的初始颜色更暗的黑色渐变，以便图像仍然显示并且文本仍然清晰。

我尝试过使用 z-index，只使用背景颜色，去除不透明度。几乎所有的东西。当我悬停时，h1 和 p 文本被覆盖，悬停颜色是白色/灰色而不是黑色。

这是我用于悬停的代码：

.image { 
    position: relative; 
    width: 100%;
    max-width: 900px;
    margin: auto;
    background: linear-gradient(180deg, rgba(38, 36, 36, 0.47) 0%, rgba(38, 36, 36, 0) 100%), url(/assets/img/pictures/feature.png);
    background-size: cover;
}

.image:hover{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0.4;
    }

<div class="image overlay blog-page" style="margin-bottom: 75px;">
    <h1 class="article">Featured Page</h1>
    <div class="row" style="margin-left: 24px;">
        <div class="col-xs">
            <img class="author-image" src="/assets/img/pictures/test.png"></img>
        </div>
        <div class="col-xs">
            <p class="article-content banner-text author">Test</p>
        </div>
</div>
</div>

我是否遗漏了一些非常明显的东西？任何帮助将不胜感激。

Answer 1

首先：图片<img> 是一个空标签。它没有结束标签，也不需要在末尾加上斜杠，因为它是一个空标签。

最简单的解决方案是使用覆盖整个块并在悬停期间显示的覆盖 div。为此，请使用与下面的 sn-p 相同的方法。

您添加一个带有属性和值的框： position: absolute; top: 0; bottom: 0; left: 0; right: 0;

然后你用display: none; 隐藏它，并在悬停期间使用:hover selector 将其更改为display: block;。

.image {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: auto;
  background: linear-gradient(180deg, rgba(38, 36, 36, 0.47) 0%, rgba(38, 36, 36, 0) 100%), url(/assets/img/pictures/feature.png);
  background-size: cover;
}

.image .image-overlay {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}

.image:hover .image-overlay {
  display: block;
}

<div class="image overlay blog-page" style="margin-bottom: 75px;">
  <h1 class="article">Featured Page</h1>
  <div class="row" style="margin-left: 24px;">
    <div class="col-xs">
      <img class="author-image" src="/assets/img/pictures/test.png">
    </div>
    <div class="col-xs">
      <p class="article-content banner-text author">Test</p>
    </div>
  </div>
  <div class="image-overlay"></div>
</div>