캡션이 위로 움직일 때 어떻게 이미지 슬라이드를 올리나요?

Question

다음 html 코드 조각을 만들었습니다 : http://jsfiddle.net/4gDMK/ 잘되었지만 캡션과 이미지를 동시에 이동하여 이미지가 더 이상 보이지 않도록 할 수는 없습니다. 예를 들어이 사이트에서

<figure> 
    <img src="http://4.bp.blogspot.com/_1vc-O2P4PHQ/S1bI97AgDoI/AAAAAAAACxs/MOo533hzeSw/s200/technical_stockphoto2.jpg" alt="Stockphoto 1" /> 
    <figcaption>Caption text</figcaption> 
</figure> 

봐 : 여기

는 기본 HTML 당신이 클릭 할 수있는 몇 가지 블록에 http://etchapps.com/ 다음 자막이 표시되고 이미지가 올라갑니다. 이것은 내가 필요로하는 것이지만, 마우스를 올리면됩니다.

누군가이 방법을 알고 있습니까? 종류와

는 많은 변화가,

Answer 1

좋아 간주, 그래서 나와 함께 곰.

(우리가 JQuery와 모든 효과 할 것입니다 때문에) CSS의이 아래로 손질 된

: 우리는 준비가 될 때까지이 이미지 아래의 사이트에서 숨겨진 앉아 캡션의 원인이됩니다

figure { 
    display: block; 
    position: relative; 
    float: left; 
    width:200px; 
    height: 200px; 
    overflow: hidden; 
    margin: 20px; 
} 
figure img { 
    display: block; 
    max-width:200px; 
} 
figcaption { 
    position: absolute; 
    background: black; 
    background: rgba(0, 0, 0, 0.75); 
    color: white; 
    padding: 10px 20px; 
    width:160px; 
} 

을 보여. 자바 스크립트 이제

: 따라서 자막을 표시하고, 화상의 윗 부분을 숨기고, 그 아래 자막의 높이를 올리는 맴돌고 때

가

//Thanks roXon 
$(function(){ 
    $('figure').on('mouseenter mouseleave', function(e){ 
     var toPos = e.type=="mouseenter" ? $('figcaption',this).innerHeight() : 0 ; 
     $('img', this).stop().animate({marginTop: -toPos}, 200); 
    }); 
}); 

(가) 모든 도면시킨다.

figure { 
    display: block; 
    position: relative; 
    float: left; 
    width:200px; 
    height: 200px; 
    overflow: hidden; 
    margin: 20px; 
} 
figure img { 
    display:block; 
    max-width:200px; 
    margin-top:0; 
     -webkit-transition: 0.3s; 
      transition: 0.3s; 
} 
figcaption { 
    position: absolute; 
    background: black; 
    background: rgba(0, 0, 0, 1); 
    color: white; 
    padding: 10px 20px; 
    width:160px; 
} 

figure:hover img{ 
    margin-top:-40px; 
} 

CSS3 바이올린 (ROXON의 제안에 따라 다시) 대신 JQuery와의 CSS3를 사용 http://jsfiddle.net/NkXCd/1/

: 마우스는 우리가 0

업데이트 바이올린의 기본으로 돌아 여백을 설정 떠날 때 http://jsfiddle.net/NkXCd/2/