How to add caption to thumbnail hover - Bootstrap?

css, hover, html, jquery, twitter-bootstrap

Solution

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

Then add the hide() or show() according to the 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 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 every .caption-btm.

But this will hide the specific one that 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);
            });

Problem

I am trying to use this thumbnail hover caption plugin for bootstrap. 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> ``` In this page, there is a part 'SlideIn/Out'. When you hover on a thumbnail normally it slides in or out. This is what I want. However, what I also need is when my cursor is not hover on thumbnail, there should be small caption at the bottom which I will write there a tagline. So basically, default position will be small caption, when my mouse is over thumbnail it will slide in. This is an exact example what I need. It can be viewed http://www.usatoday.com/news/ NO HOVER HOVER This is the jsfiddle page http://jsfiddle.net/g4j8B/

Original source