图片叠加淡入淡出，文字在img淡出后可见

Question

我了解了关于悬停效果和在悬停时显示带有或不带有漂亮透明覆盖层的文本的所有内容。都很漂亮，但是 none 回答了我的问题。

我有一个 "main" 图像，上面有透明的叠加图像，悬停时叠加图像会淡出。

一切都很好，但是我只想在叠加图像消失时显示文本。一个很简单的效果，我以为..

我创建了一个 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

Answer 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>

Answer 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>

图片叠加淡入淡出，文字在img淡出后可见

Img overlay fade, text visible after img fade

css

overlay

hover