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

Question

I wanna slide images from the top of images to bottom with css. Actually I write some codes. But, I dont wanna write specific pixel for sliding.

I dont want this:

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

I want like this:

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

Here is my 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
}

Here is my 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>

How can I do this?

Answer 1

Use percentages instead. Check this out!

It need not be specific pixels as you say- on img:hover if I say 100% height, it will mean the whole image height.

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

EDIT: Put a display: block; on the img element and you can get rid of the whitespace below the image too!