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>