HTML/CSS 三个堆叠/偏移图像

Question

出于某种原因，我在使用 HTML/CSS 堆叠图像时遇到了问题。我有三张幻灯片，彼此叠放，略微偏移，以便它们从下到上从下到上突出。当我将鼠标悬停在“峰值”的边缘时，我使用的动画应该允许它们向右滑动。它与两张图片完美搭配，但出于某种原因，当我将第三张添加到堆中时，底部两张的动画停止工作。不知道为什么这行不通。

代码如下:

#containerContainer {
  position: relative;
}
#instashContainer,
#wisdomCotainer,
#visContainer {
  position: absolute;
  height: 744px;
  width: 1860px;
  overflow: hidden;
}
#instashContainer img,
#wisdomContainer img,
#visContainer img {
  opacity: .7;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: translate3d(-1600px, 0px, 0px);
  transition: transform .6s ease-in-out;
}
#instashContainer img:hover,
#wisdomContainer img:hover,
#visContainer img:hover {
  transform: translate3d(0px, 0px, 0px);
}

<div id="containerContainer">


  <!--Inspiration Slidepage-->
  <div id="instashContainer">
    <img src="instash_slidepage.jpg" height=744 width=1820>
    </img>
  </div>

  <!--Wisdom Slidepage-->
  <div id="wisdomContainer">
    <img src="wisdom_slidepage.jpg" height=744 width=1780>
    </img>
  </div>

  <!--Visualization Slidepage-->
  <div id="visContainer">
    <img src="visualization_slidepage.jpg" height=744 width=1740>
    </img>
  </div>


</div>

当我在另外两张图片上添加第三张图片时，另外两张图片的动画停止工作，但顶部图片的动画有效(即它向右滑动)。当我删除顶部图像但不做任何更改时，其他两个的动画再次起作用。

为什么？另外，如何在不影响其他两张图片的动画的情况下添加这第三张图片？

Answer 1

问题

• 这里有错字:#wisdomCotainer , 应该是 #wisdomContainer

注意事项

• 不要使用 HTML 标签 width/height , 改用 CSS
• <img>标签是自闭标签，因此不需要 </img>
• 在这种情况下，您可以使用直接子选择器 > 来简化您的 CSS

#containerContainer {
  position: relative;
}
#containerContainer > div {
  position: absolute;
  height: 744px;
  width: 1860px;
  overflow: hidden;
}
#containerContainer > div img {
  opacity: .7;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: translate3d(-1600px, 0px, 0px);
  transition: transform .6s ease-in-out;
  height: 744px;
  width: 1820px;
}
#containerContainer > div img:hover {
  transform: translate3d(0px, 0px, 0px);
}

<div id="containerContainer">
  <!--Inspiration Slidepage-->
  <div id="instashContainer">
    <img src="//lorempixel.com/1280/744" />
  </div>
  <!--Wisdom Slidepage-->
  <div id="wisdomContainer">
    <img src="//lorempixel.com/1280/744" />
  </div>
  <!--Visualization Slidepage-->
  <div id="visContainer">
    <img src="//lorempixel.com/1280/744" />
  </div>
</div>