CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstraphover
SNaRe
SNaRe

Reputation: 2067

How to add caption to thumbnail hover - Bootstrap?

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

enter image description here

HOVER

enter image description here

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

Upvotes: 4

Views: 26541

Answers (2)

designtocode
designtocode

Reputation: 2245

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);
            });

Upvotes: 6

Ant&#243;nio Regadas
Ant&#243;nio Regadas

Reputation: 724

Here is my fiddle, check the first item.

What i've done is add some text bedofre the caption and after the thumbnail and tell it to hide when the user hovers on the thumbnail:

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

It isn't pretty (it has inline css for the sake of the example), but i think it does what you want.

Upvotes: 1

Related Questions