Add text overlay to panel and image with Zurb Foundation?

Question

I am not new to programming but I am new to Zurb Foundation and am using Foundation 5. I have some simple panels that consist of image and text below. Does Foundation have the capability to add a text overlay to a picture? Of course, I could integrate the text into the picture, but I'd like to be able to quickly swap it out. Is there a way to just overlay it? This is what I have now

<div class="large-3 small-6 columns">
  <img src="mypic.jpg" />
  <h6 class="panel"><strong>My Pic Description</strong></h6>
</div>

Note that in the above example, I would still keep "My Pic Description", but I would have additional text overlayed on "mypic.jpg". Is this possible?

score 11 · Accepted Answer · edited May 23 '17 at 12:09

Well, Foundation doesn't have the overlay text feature. However, we can do that manually.

Foundation uses left/right paddings for the columns (.columns) and furthermore, The overlay should be positioned over the image.

Hence we need an additional wrapper for the image and the overlay text in order to position the overlay correctly.

Here is my attempt:

HTML:

<div class="large-3 small-6 columns">
    <div class="overlay-container">
        <img src="http://lorempixel.com/500/300" />
        <div class="overlay">Overlay text</div>
    </div>

    <h6 class="panel"><strong>My Pic Description</strong></h6>
</div>

CSS:

.overlay-container {
  position: relative; /* <-- Set as the reference for the positioned overlay */
}

.overlay-container .overlay {
  position: absolute; /* <-- Remove the overlay from normal flow         */
  bottom: 0;          /* <-- Keep the overlay at the bottom of the box   */
  left: 0;            /* <-- Set left and right properties to 0          */
  right: 0;           /*     In order to expand the overlay horizontally */

  padding: 0.4rem;
  background-color: rgba(255, 255, 255, 0.7);
}

WORKING DEMO

Update

In order to display the overlay over the image completely, you could set the top property of .overlay class to 0. (Simply top: 0;)

But the text itself would be displayed at the top of the image.

In order to display the text (which may has multiple sentences with unknown height) at the middle of the overlay, you could follow this approach which I explained lately on SO, as follows:

.overlay-container .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.4rem;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font: 0/0 a; /* Remove the gap between inline(-block) elements */
}

.overlay-container .overlay:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.overlay-container .overlay span {
  font: 16px/1 Arial, sans-serif; /* Reset the font property */
  display: inline-block;
  vertical-align: middle;
}

And wrap the text by <span>:

<div class="overlay">
    <span>Overlay text</span>
</div>

WORKING DEMO

Excellent answer! Thank you. Its definitely getting me very close. I'm trying to expand this answer so that the background color takes up the whole DIV, not just the section where I have text. So, the entire image would have the opaque color on top (right now its just where there is text). I tried moving the background color to the overlay-container definition and that didn't seem to work. Thoughts? — Unknown Coder, Feb 05 '14 at 18:25
@JimBeam What about the text itself? Should it be displayed at the top, bottom, or the middle? — Hashem Qolami, Feb 05 '14 at 18:41
I modified your answer to have the div start in the upper-right-hand corner — Unknown Coder, Feb 05 '14 at 18:43

Add text overlay to panel and image with Zurb Foundation?

1 Answers1

Update

Linked