jquery - How to add caption to thumbnail hover - Bootstrap? -

i trying use thumbnail hover caption plugin bootstrap.

http://sevenx.de/demo/bootstrap/thumbnail-hover-caption.html

this code.

<div class="thumbnail">                 <div class="caption" style="display: none;">                     <h4>caption title</h4>                     <p><a href="#" class="btn btn-inverse" rel="tooltip" title="" data-original-title="preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="" class="btn btn-inverse" data-original-title="visit website"><i class="icon-share"></i></a></p>                 </div>                 <img src="http://placehold.it/600x400" alt="alt name">               </div> 

in page, there part 'slidein/out'.

when hover on thumbnail slides in or out. want.

however, need when cursor not hover on thumbnail, there should small caption @ bottom write there tagline.

so basically, default position small caption, when mouse on thumbnail slide in.

this exact example need. can viewed http://www.usatoday.com/news/

no hover

hover

this jsfiddle page http://jsfiddle.net/g4j8b/

you need place div above image , style needs.

then add hide() or show() according bootstraps sliding etc.

fiddle

html:

<li class="span3">                     <div class="thumbnail">                         <div class="caption">                              <h4>caption title</h4>                              <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt.</p>                             <p><a href="#" class="btn btn-inverse" rel="tooltip" title="preview"><i class="icon-eye-open"></i></a>  <a href="#" rel="tooltip" title="visit website" class="btn btn-inverse"><i class="icon-share"></i></a>                              </p>                         </div>                         <div class="caption-btm">lorem ipsum dolor sit amet, consectetur adipisicing eli...</div>                         <img src="http://placehold.it/600x400" alt="alt name">                     </div>                      <h4>item name</h4>                  </li> 

css:

.caption-btm{         background: rgba(0,0,0,0.6);         width: 100%;         height: 30px;         position: absolute;         bottom: 4px;         color: #fff;     } 

jquery:

$('#hover-cap-4col .thumbnail').hover(                  function() {                     $(this).find('.caption').slidedown(250);                     $('.caption-btm').hide(100);                 },                  function() {                     $(this).find('.caption').slideup(250);                     $('.caption-btm').show(450);                 }); 

edit

the above jquery show , hide every .caption-btm.

but hide specific 1 it's being hovered over:

fiddle

jquery:

    $('#hover-img .thumbnail').hover(              function () {                 $(this).find('.caption').slidedown(250);                 $(this).find('.caption-btm').hide(250);             },              function () {                 $(this).find('.caption').slideup(250);                 $(this).find('.caption-btm').show(250);             });