javascript - 在一个位置交叉淡入/淡出图像与其他图像？

Question

我有一个 fiddle其中有 4 个瓷砖水平放置，中间有一些空间。

这是我用来水平放置它们的 CSS。

.featured-block {
  position: relative;
  display: flex;
  justify-content: space-between;
}

问题陈述:

对于 fiddle 中的3rd/4th tile(image)，我想要实现的是我想要交叉淡入淡出(淡入/淡出) 发生它们(第 3/4 张图像) 在左侧 的第 3 个位置。

我相信我需要添加以下 css 代码并进行一些修改才能实现这一点，但我不确定是什么我需要做的修改。

.featured-block__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 800ms ease; /* immediately start fading out when active class is lost */
}

.featured-block__item.featured-block__item-active {
  opacity: 1;
}

Answer 1

你可以使用下面的CSS代码

.featured-block {
  position: relative;
  display: flex;
  width:100%;
  overflow:hidden;
  justify-content: space-between;
}
.featured-block__item:nth-last-child(2),
.featured-block__item:last-child{
  opacity: 0;
  transition: opacity 800ms ease; /* immediately start fading out when active class is lost */
}
img{
  width:calc(100% / 3);
}
.featured-block__item:last-child{
  position: absolute;
  top: 0px;
 
  right: 0px;
  bottom:0px;
  
  
}
.featured-block__item:nth-last-child(2).featured-block__item-active,
.featured-block__item:last-child.featured-block__item-active {
  opacity: 1;
}