Captions on images in JQuery Cycle slider

Question

I'm trying to get captions on images (like so, but without the animation) within this JQuery slider, but without much success so far.

This is the HTML for the slider...

<div class="container-slideshow"><div class="slideshow">
    <img src="img/pic2.jpg" width="300" height="200" />
    <img src="img/pic3.jpg" width="300" height="200" />
    <img src="img/pic4.jpg" width="300" height="200" />
    <img src="img/pic5.png" width="300" height="200" />
</div></div>

...which is activated by:

<script type="text/javascript">
$('.slideshow').cycle({
    fx: 'scrollLeft',
    speed: 400,
    pause: 1
});

I've tried wrapping each image in a div together with a caption div - like

<div><img src="img/pic2.jpg" width="300" height="200" /><div class="caption">Caption</div></div>

• but the image overrides the caption. Z-index doesn't make a difference. The images also don't allow CSS opacity, which tells me they are being dealt with in JQuery?

I don't know. Does anybody?

Thanks!

Answer 1

.slide {
    width: 300px;
    height: 200px;
}
.s1 {
    background: url(http://www.hitarth.net/wp-content/uploads/2012/11/cute-puppy-300x200.jpg);
}
.s2 {
    background: url(http://www.cesarsway.com/sites/default/files/imagecache/feature_300x200/images/LabPup.jpg);
}
.s3 {
    background: url(http://cdn.cutestpaw.com/wp-content/uploads/2012/06/s-my-puppy-has-no-eyes.jpg);
}
.caption {
    height: 25px;
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3);
    text-align: center;
    color: #fff;
}

<div class="container-slideshow">
    <div class="slideshow">
        <div class="slide s1">
            <div class="caption">Caption One</div>
        </div>
        <div class="slide s2">
            <div class="caption">Caption Two</div>
        </div>
        <div class="slide s3">
            <div class="caption">Caption Three</div>
        </div>
    </div>
</div>

http://jsfiddle.net/XuwUX/