Question

我想用css将图像从图像顶部滑动到底部。其实我写了一些代码。但是，我不想写特定的像素滑动。

我不想要这个：

transform:translate3d(0px,-150px,0px);

我想这样：

transform:translate3d(0px,AUTO,0px);

这是我的css：

.work
{
    width:100%;
    height:350px;
    float:left;
    margin-bottom:10px;
    border:2px solid #e5e5e5;
    overflow:hidden
}

.work img
{
    width:100%;
    -moz-transition:all .6s;
    -webkit-transition:all .6s;
    transition:all .6s;
    transform:translate3d(0px,0px,0px)
}

.work img:hover
{
    transform:translate3d(0px,-150px,0px);
    margin:0
}

这是我的HTML：

<div class="work">
   <a href="http://example.com">
      <img src="http://anlamli-guzelsozler.com/wp-content/uploads/2015/05/krt-manzara-resimleri.jpg">
      <div>Example</div>
   </a>
</div>

我该怎么做？

Answer 1

请改用百分比。看看这个！

如果我说{100}高度，它就不需要像你所说的特定像素一样，它将意味着整个图像的高度。

img:hover

.work {
  width: 100%;
  float: left;
  margin-bottom: 10px;
  border: 2px solid #e5e5e5;
  overflow: hidden
}
.work img {
  display: block;
  width: 100%;
  -moz-transition: all .6s;
  -webkit-transition: all .6s;
  transition: all .6s;
  transform: translate3d(0px, 0px, 0px)
}
.work:hover img {
  transform: translate3d(0px, -100%, 0px);
  margin: 0
}

修改在<div class="work"> <a href="http://example.com"> <img src="http://anlamli-guzelsozler.com/wp-content/uploads/2015/05/krt-manzara-resimleri.jpg"> </a> </div>元素上添加display: block;，您也可以摆脱图像下方的空白区域！

如何使用CSS在悬停时滑动图像？

1 个答案: