How to add a signature to a thumbnail index - Bootstrap?

Question

I am trying to use this header for a thumbnail title for bootstrapping.

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

This is the 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> 

This page has the "SlideIn / Out" part.

When you hover over a thumbnail, it usually slides in or out. This is what I want.

However, what I also need is when my cursor is not hovering over a thumbnail, there should be a small inscription in the lower part, in which I will write a tagline there.

Thus, by default, the default position will be a small label, when my mouse exceeds the thumbnail, it will slide.

This is an exact example of what I need. It can be viewed at http://www.usatoday.com/news/

NO HOVER

Guidance

This is the jsfiddle page http://jsfiddle.net/g4j8B/

Answer 1

You need to place another div above the image and adjust it to your needs.

Then add hide () or show () according to the shift of Bootstraps, 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 do 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 will show and hide all .caption-btm.

But this will hide the concrete that it hangs 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); }); 

Answer 2

Here is my fiddle , check the first item.

What I did is add text to the text under the heading and after the thumbnail and tell it to hide when the user hovers over the thumbnail:

 .thumbnail:hover .front { display: none; } 

This is not very good (it has built-in css for example), but I think it does what you want.