CSS를 사용하여 이미지를 슬라이드하여 어떻게 슬라이드합니까?

Question

이미지 상단에서 CSS로 이미지를 슬라이드하고 싶습니다. 사실 몇 가지 코드를 작성합니다. 그러나 슬라이딩을위한 특정 픽셀을 작성하고 싶지 않습니다.

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

:

여기

.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입니다 :이처럼 원하는

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

을 : 여기

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

내 CSS입니다

나는이 돼요

어떻게하면됩니까?

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>

는 편집 : 는 img 요소에 display: block;을 넣고 너무 이미지 아래에 공백을 제거 할 수 있습니다!