如何使用css将图像变黑并使文本在悬停时出现？

huwehgph 于 2023-01-27 发布在其他

关注(0)|答案(3)|浏览(184)

我正在做一个画廊的图像作为一个功能在我的网站上，画廊将代表作为一个网格的图像。
我希望能够悬停在一个网格项目，并有图像变成完全黑色，并有文字覆盖在白色的顶部，但挣扎着使用CSS结构这种效果。
我的目标是"post_feature_outer"，并将该div中的文本颜色从透明变为白色。
文本显示白色时，悬停在广场上的预期。我还希望图像变成完全黑色以及
CSS过滤器不工作，因为这也删除了文本，有人知道如何获得的效果吗？
下面是一个例子，我的意思是什么时候没有悬停与悬停在瓷砖。
谢谢
不要停留：

悬停：

谢谢大家!

.post_feature_outer {
  color: rgba(0, 0, 0, 0);
}

.post_feature_outer:hover {
  color: white;
}

/* added by community for clarity */

body {
  background: #222;
}

<div class='post_feature_outer'>
  <h1 class="post_feature_title">VOGUE ITALIA – JUNE 2022 ISSUE</h1>
  <img class="post_feature_img" src="https://via.placeholder.com/300x200" />
</div>

css

来源：https://stackoverflow.com/questions/75251013/how-to-turn-image-to-black-and-make-text-appear-on-hover-using-css

3条答案

按热度按时间

nkhmeac61#

我认为这会有所帮助：

.post_feature_outer {
  width: 600px;
  height: 200px;
  position: relative;
}

.post_feature_title {
  margin: 0;
  align-items: center;
  justify-content: center;
  background-color: black;
  color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
}

.post_feature_img {
  width: 100%;
  height: 100%;
}

.post_feature_outer:hover .post_feature_title {
  display: flex;
}

<div class='post_feature_outer'>
  <h1 class="post_feature_title">VOGUE ITALIA – JUNE 2022 ISSUE</h1>
  <img class="post_feature_img" src="https://upload.wikimedia.org/wikipedia/commons/8/84/Flag_of_Uzbekistan.svg" />
</div>

赞(0）回复(0）举报 2023-01-27

x3naxklr2#

我想我会使用绝对定位来分层标题和图像，以及不透明度的显示/隐藏效果。

.post_feature_outer {
  background-color: #000;
  display: inline-block;
  position: relative;
}

.post_feature_title {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
  transition: all 0.3s;
  color: white;
  opacity: 0;
}

.post_feature_img {
  transition: all 0.3s;
  font-size: 0;
  display: block;
}

.post_feature_outer:hover .post_feature_title {
  opacity: 1;
}

.post_feature_outer:hover .post_feature_img {
  opacity: 0;
}

<div class='post_feature_outer'>
  <div class="post_feature_title">
    <h1>VOGUE ITALIA – JUNE 2022 ISSUE</h1>
  </div>

  <img class="post_feature_img" src="https://via.placeholder.com/300x200" />
</div>

赞(0）回复(0）举报 2023-01-27

mm9b1k5b3#

触发器：悬停在父元素上，显示/隐藏所需的元素。

.post_feature_outer h1 {
  display: none; /* hide by default */
  background: black;
  color: white;
}

/* trigger :hover on parent div: */
.post_feature_outer:hover h1 {
  display: block;
}

.post_feature_outer:hover img {
  display: none;
}

<div class='post_feature_outer'>
  <h1 class="post_feature_title">VOGUE ITALIA – JUNE 2022 ISSUE</h1>
  <img class="post_feature_img" src="https://via.placeholder.com/300x200" />
</div>

赞(0）回复(0）举报 2023-01-27

我来回答

如何使用css将图像变黑并使文本在悬停时出现？

3条答案

相关问题

热门标签

最新问答