图像叠加淡出，img淡出后文字可见答案

【问题标题】：Img overlay fade, text visible after img fade图像叠加淡出，img淡出后文字可见
【发布时间】：2016-02-03 06:07:02
【问题描述】：

我已经了解了有关悬停效果和悬停时显示文本的所有知识，无论是否有漂亮的透明叠加层。都很漂亮，但没有一个回答我的问题。

我有一个带有透明叠加图像的“主”图像，悬停时叠加图像淡出。

一切都很好，但是我只想在覆盖图像消失时显示一个文本。一个非常简单的效果，我想..

我创建了一个 JSFiddle 来说明效果。我没有添加任何过渡或图像，只是我寻求的简单效果，但颠倒了。

总而言之，有没有一种方法可以让透明的叠加图像在文本变得可见时褪色，只使用 CSS 而不使用 JavaScript？

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  height: 150px;
  width: 150px;
  z-index: 1;
}

.overlay:hover {
  position: absolute;
  opacity: 0;
  height: 150px;
  width: 150px;
}

.lay {
  color: #F0F;
  position: absolute;
  height: 150px;
  width: 150px;
  background-image: url('');
  background-color: #FFF;
  z-index: 0;
}

.lay:hover {
  opacity: 1;
}

JSFiddle DEMO

【问题讨论】：

您忘记了小提琴中的 CSS
您的小提琴中没有 CSS... 无论如何，您是否考虑过使用 CSS Transitions？一旦我看到了您试图提出的效果，我可能会为您提供更多帮助。

标签： css hover overlay

【解决方案1】：

是的，这仅通过 CSS 就可以实现，而且相当简单。基本思路如下：

创建一个包装元素来保存图像和文本。
将文本放在图片后面，使其不可见
在包装器的:hover 上，淡化图像以显示其背后的文本。

这是一个简单的例子：

.een {
  position: relative;
  display: inline-block;
}

.een:hover img {
  opacity: 0;
}

.een p {
  position: absolute;
  top: 45%;
  width: 80%;
  margin: 0 10%;
  text-align: center;
  z-index: 10;
}

img {
  position: relative;
  z-index: 100;
  transition: opacity linear 0.5s;
}

<div class="een">
  <p class="drie">
    Lorem ipsum dolor sit amet, Show Me!
  </p>
  <img src="http://placehold.it/250x250">
</div>

【讨论】：

谢谢！！你把我从另一个不眠之夜中拯救了出来。我知道这很简单，但就这么简单。谢谢。

【解决方案2】：

您需要在叠加层上添加transition 才能获得淡入淡出效果。

https://jsfiddle.net/xznjfL0e/1/

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  height: 150px;
  width: 150px;
  z-index: 1;
  transition: 1s;/* <=== here */
}
.overlay:hover {
  position: absolute;
  opacity: 0;
  height: 150px;
  width: 150px;
}
.lay {
  color: #F0F;
  position: absolute;
  height: 150px;
  width: 150px;
  background-image: url('');
  background-color: #FFF;
  z-index: 0;
}
.lay:hover {
  opacity: 1;
}

<div class="overlay"></div>

<div class="een">
  <p class="drie">
    Lorem ipsum dolor sit amet, Show Me!
  </p>
</div>

【讨论】：