Question

由于某些原因，我在HTML / CSS中堆叠图像时遇到问题。我有三个相互叠放的幻灯片，略微偏移，以便它们从下到上顶出。我正在使用的动画应该允许它们在我徘徊在＆＃34;峰值边缘时向右滑动。＆＃34;它与两个图像完美配合，但出于某种原因，当我添加第三个图像时，底部两个的动画停止工作。 NO CLUE为什么这不会起作用。

以下是代码：

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

当我添加第三个图像时，在另外两个图像的顶部，其他两个图像的动画停止工作，但顶部图像的动画工作（即它向右滑动）。当我删除顶部图像，但不改变任何其他内容时，其他两个动画再次起作用。

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

Answer 1

你在这里遇到拼写错误：

#instashContainer, #wisdomCotainer, #visContainer {
}

应改为#wisdomContainer。

Answer 2

问题

您在此处输入错误：#wisdomCotainer，应为#wisdomContainer

注释

不要使用HTML标记width / height，而是使用CSS
<img>标记是自闭标记，因此不需要</img>
在这种情况下，您可以使用直接子选择器>

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

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

2 个答案:

问题

注释