使用css3在Hover上水平滑动图像

Question

我试图制作水平滑块，它会在div悬停时滑动图像。但它没有用。

我应该如何修改代码呢？

以下是http://www.kirupa.com/html5/slide_image_hover_using_css3.htm

的链接

Answer 1

按照以下简单步骤创建此动画

• 只需取一个容器，然后应用高度和宽度，并隐藏溢出。
• 放置一个图像，其宽度与容器的宽度相同。
• 然后将潜水移动图像向上悬停top: -150px;
• 并为动画添加transition: top 1s ease-in-out;

.container {
  height: 150px;
  width: 150px;
  overflow: hidden;
}
.smiley {
  position: relative;
  top: 0;
  transition: top 0.2s ease-in-out;
}
.container:hover .smiley {
  top: -150px;
}

<div class="container">
  <img src="http://i62.tinypic.com/fy1v2e.png" class="smiley">
</div>

以下是该滑块的完整版

.slider {
  width: 325px;
  background: #ccc;
}
.container {
  margin: 5px 0px 5px 5px;
  height: 150px;
  width: 150px;
  overflow: hidden;
  display: inline-block;
}
.smiley {
  position: relative;
  top: 0;
  transition: top 0.2s ease-in-out;
}
.container:hover .smiley {
  top: -150px;
}

<div class="slider">
  <div class="container">
    <img src="http://i62.tinypic.com/fy1v2e.png" class="smiley">
  </div>
  <div class="container">
    <img src="http://i61.tinypic.com/15d9isj.png" class="smiley">
  </div>
  <div class="container">
    <img src="http://i60.tinypic.com/2uha93k.png" class="smiley">
  </div>
  <div class="container">
    <img src="http://i58.tinypic.com/2dgnj84.png" class="smiley">
  </div>
</div>

欢呼声