Menu

Create an Overlay Image Caption for Foundation

December 19, 2014 by Christopher Sherman

If you’ve used Foundation’s Orbit image slider, you have seen the clean, opaque captions the JavaScript overlays on your images. Unfortunately, the framework doesn’t provide styles for overlaying a similar caption on images that do not utilize Orbit. Let’s go ahead and add this.

Add a new .SCSS file with the code below.

.img-container {
position: relative;

    .caption-container {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #000;
        color: #FFF;
        opacity: 0.75;
        width: 100%;
    }

    .caption-content {
        padding: emCalc(10px);
        margin: 0;
    }

}

The first class, .img-container, pairs nicely with a div element. Setting its position to relative allows us to absolutely position the caption. The caption-container class is absolutely positioned at the bottom left of the containing div, with the width set to fill up the entire lateral area.

Now import the .SCSS file you created into your stylesheet to start using it. See below for an example of its usage.

<div class="img-container">
    <img data-interchange="/img/photo.jpg" alt="Sample photo">

    <div class="caption-container">
        <p class="caption-content">
            Sample caption
        </p>
    </div>

</div>

Zurb Foundation Sass