Add text overlay to panel and image with Zurb Foundation?

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/21582774/add-text-overlay-to-panel-and-image-with-zurb-foundation

标签

html

css

zurb-foundation