jQuery image slider caption on mouse hover

Question

I am using bxSlider to display multiple images. Now how to show image cation on image hover.

I have added captions: true but I want to show when user hover on image.

HTML Code:

<ul class="bxslider">
    <li>
        <img src="http://bxslider.com/images/730_200/hill_trees.jpg" title="Sample 1" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/me_trees.jpg" title="Sample 2" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/houses.jpg" title="Sample 3" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/tree_root.jpg" title="Sample 4" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/hill_fence.jpg" title="Sample 4" />
    </li>
    <li>
        <img src="http://bxslider.com/images/730_200/trees.jpg" title="Sample 5" />
    </li>
</ul>

JS Code:

$('.bxslider').bxSlider({
    auto: true,
    minSlides: 1,
    pause: 4000,
    moveSlides: 1,
    maxSlides: 4,
    slideWidth: 260,
    slideMargin: 13,
    touchEnabled: true,
    pager: false,
    controls: false,
    captions: true,
    autoHover: true
});

My JSFiddle: Demo

Any ideas or suggestions? Thanks.

Answer 1

You can set captions true option and set the visibility of the caption span class to none.

Than on mouseenter and mouseleave events show/hide the caption element.

Code:

$('.bxslider').bxSlider({
    auto: true,
    minSlides: 1,
    pause: 3000,
    moveSlides: 1,
    maxSlides: 4,
    slideWidth: 260,
    slideMargin: 13,
    touchEnabled: true,
    pager: false,
    captions: true,
    controls: false,
    autoHover: true
});

$(".bxslider li").mouseenter(function () {
    $(this).find(".bx-caption").fadeIn();
})

$(".bxslider li").mouseleave(function () {
    $(this).find(".bx-caption").fadeOut();
});

Remember to add this to your css to initially hide the caption:

.bx-caption {
    display: none;
}

Demo: http://jsfiddle.net/IrvinDominin/HsDY9/

Answer 2

Instead of heavy jQuery manipulations or editing the original CSS file I suggest you add the following CSS to your code:

.bx-caption{
    display:none;
}

.bx-wrapper li:hover .bx-caption{
    display:block;
}

Fiddle Link

Note: In IE there must be declared a for the :hover selector to work on other elements than the element.

Answer 3

I have added the bx-slider css and made some changes. http://jsfiddle.net/Yq3RM/288/

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: -100%;
    left: 0;
    background: #666\9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
    /*additional styles*/
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.bxslider li:hover .bx-caption{
    bottom:0
}

As you can see the caption is set out of the slide and on hover is revealed with pure CSS