イメージをCSSでホバー上にスライドさせるにはどうすればいいですか？

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>

EDIT： img要素にdisplay: block;を入れて、あなたも画像下の空白を取り除くことができます！