html - 使用css3在悬停上水平滑动图像

Question

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

我应该如何修改它的代码？

这是 http://www.kirupa.com/html5/slide_image_hover_using_css3.htm 的链接

Answer 1

按照这个简单的步骤来创建这个动画

• 只需取一个容器并应用高度和宽度，并 overflow hidden 。
• 放一张有两个正方形宽度的图片作为容器。
• 然后在悬停俯冲时向上移动图像 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 的完整版本

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

干杯