css - 交叉淡入淡出 2 张不透明度为 0.7 的图像

Question

我有两张相互重叠的图片，如果你将鼠标悬停在顶部，它会在 1 秒后从opacity:1到消失opacity:0。

我希望它们具有opacity:0.7默认值，然后，当悬停在另一个上时，应该显示。

我遇到的问题是两个图像opacity:0.7现在都显示了，因为显然它们有点透明。

有没有办法做到这一点？

Answer 1

据我了解，您的底层图像也有点可见。

您需要做的是将第一张图像的不透明度设置为 0，如下所示：

.img-overlay {
  display: inline-block;
  position: relative;
}

.img-overlay img {
  opacity: .7;
  transition: opacity 1s;
}

.img-overlay img:last-child {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/* Set opacity to 0, ... */
.img-overlay:hover img {
  opacity: 0;
}

/* ... but only for the last image set it to .7 */
.img-overlay:hover img:last-child {
  opacity: .7;
}

<a href="#" class="img-overlay">
  <img src="http://pipsum.com/235x110.jpg?1" />
  <img src="http://pipsum.com/235x110.jpg?2" />
</a>