jquery mouseover image 캡션 슬라이드 업

사용자가 마우스를 올려 놓으면 캡션이 위로 움직이는 이미지를 만들려고합니다. 나는 JQuery에서 호버 기능을 사용하여 일을 할 수 있었지만 캡션을 아래쪽으로 밀어 내고 싶다.jquery mouseover image 캡션 슬라이드 업

내 HTML :

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link href="styles.css" rel="stylesheet" /> 
<title>Gallery</title> 
<script src="jquery-1.11.1.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('figure.imgHolder img').mouseover(function() { 
     $(this).next().slideUp(300); 
    }); 
}); 
</script> 
</head> 
<body> 

<figure class="imgHolder" id="batman"> 
    <img src="images/batman.jpg" /> 
    <figcaption>Batman</figcaption> 
</figure> 
<figure class="imgHolder" id="robin"> 
    <img src="images/robin.jpg" /> 
    <figcaption>Robin</figcaption> 
</figure> 
<figure class="imgHolder" id="superman"> 
    <img src="images/superman.jpg" /> 
    <figcaption>Superman</figcaption> 
</figure> 
<figure class="imgHolder" id="wonderwoman"> 
    <img src="images/wonderwoman.jpg" /> 
    <figcaption>Wonder Woman</figcaption> 
</figure> 


</body> 
</html>

내 CSS : 바로 당신을 이해한다면

.imgHolder { 
    position: relative; 
    width: 576px; 
    height: 365px; 
    margin-bottom: 10px; 
} 
.imgHolder img { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
} 
.imgHolder figcaption { 
    position: absolute; 
    z-index: 2; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.7); 
    color: #ffffff; 
    font-size: 24px; 
    width: 556px; 
    padding: 10px; 
    display: none; 
}

출처

2014-09-07 Cvamped

이보십시오.

$(document).ready(function() { 
      $('figure.imgHolder img').hover(function() { 
       $(this).next().slideToggle(300); 
      }); 
     });

출처

2014-09-07 13:04:04 siropo

jquery mouseover image 캡션 슬라이드 업

답변

관련 문제