Question

我已经了解了有关悬停效果的所有内容，并在悬停时显示文字，有或没有漂亮的透明叠加层。一切都很美，但没有人回答我的问题。

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

一切都非常好，但我只是想在叠加图像淡出时显示文字。一个非常简单的效果，我想......

我已经创建了一个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上，淡化图像以显示其背后的文本。

这是一个简单的例子：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Img叠加淡出，img淡化后文本可见

2 个答案: