부트 스트랩 섬네일 캡션 가져 오기 - 효과?

Question

HTML 코드 :

<div class="container"> 

     <div class="row"> 

      <div class="col-md-3">    
       <div class="thumbnail"> 
        <div class="caption"> 
         <h4>Banking & Finance</h4> 
         <p>short thumbnail description</p> 
         <p><a href="" class="label label-danger" rel="tooltip" title="Zoom"></a> 
         <a href="" class="label label-default" rel="tooltip" title="Learn More">Learn More..</a></p> 
        </div> 
        <img src="http://lorempixel.com/400/300/sports/1/" alt="..."> 
       </div> 
      </div> 

      <div class="col-md-3">    
       <div class="thumbnail"> 
        <div class="caption"> 
         <h4>Education</h4> 
         <p>short thumbnail description</p> 
         <p><a href="" class="label label-danger" rel="tooltip" title="Zoom"></a> 
         <a href="" class="label label-default" rel="tooltip" title="Learn More..">Learn More..</a></p> 
        </div> 
        <img src="http://lorempixel.com/400/300/sports/2/" alt="..."> 
       </div> 
      </div> 


     </div> 
    </div>    

JQUERY :

$(document).ready(function() { 
    $("[rel='tooltip']").tooltip();  
    $(this).find('.caption').slideUp(250); 

    $('.thumbnail').hover(

     function(){ 
      $(this).find('.caption').slideDown(250); //.fadeOut(205) 
     }, 
     function(){ 
      $(this).find('.caption').slideUp(250); //.fadeIn(250) 
     } 
    ); 
}); 

CSS :

thumbnail { 
    position:relative; 
    overflow:hidden; 
} 
.caption { 
    position:absolute; 
    top:0; 
    right:0; 
    background:rgba(30, 165, 158, 0.75); 
    width:100%; 
    height:100%; 
    padding:2%; 
    display: none; 
    text-align:center; 
    color:#fff !important; 
    z-index:2; 
} 

jsfiddle 링크 : 아래의 코드에서 http://jsfiddle.net/salmanamaan24/4u6tL/3/

(부트 스트랩을 사용하여 수행) 내가이 이미지 위에 마우스를 가져 가면 녹색 효과. 그래서 내가 원하는 것은 그것의 반대입니다. 언제든지 파일을 실행하면 호버 효과가 나타나야합니다. 그리고 커서를 올려 놓으면 이미지가 나타납니다. 어떤 도움도 받으실 수 있습니다 ..

Answer 1

업데이트했습니다. fiddle

이게 당신이 찾고 있는게 뭡니까?

JS : 코드에서 slideUp에 slideDown 및 slideDown에

$(document).ready(function() { 
    $("[rel='tooltip']").tooltip();  
    $(this).find('.caption').slideDown(250); 


     $('.thumbnail').hover(

     function(){ 
      $(this).find('.caption').slideUp(250); 
     }, 
     function(){ 
      $(this).find('.caption').slideDown(250); 
     } 
    ); 


});