Tutorial - Text Overlay on to an Image with CSS

Date: 2015-07-11

Home Page

Overlay is cool, but it does not work everywhere. This overlay example works with Mozilla Firefox v34+ and Google Chrome v39+, and possibly the current Safari. For overlay to work we will use HTML5, CSS3 and the CSS attribute position:absolute. No Javascript is required.

One of the reasons I wrote this is because everywhere I read the same bad explanation for doing this task. I'm hoping mine is better.1 If not, there is further reading at the bottom.

On the top left of this article is an image with a text overlay. Click on the image to see the original – without the overlay. Copy the text from the overlay; it really is an overlay.

The source code is availabe on github.com at: https://github.com/jessemonroy650/tutorial-html5ui-overlay

How it Works.

All the explanation say, the "positioned" element will be placed relative to the nearest positioned ancestor. What this mean is that the "positioned" element MUST have an element that wraps it (and by default that wrapper is it's ancestor2). However, what everyone fails to say *clearly* is that both elements must use the position attribute with any option, except static 3. (NOTE: If you do not use the position attribute, then you get the default – position:static.)

The classic example is for the wrapper element to be position:relative and the inner element be position:absolute4. It is almost that simple, except when you use the <div> element, the default is to be as wide as the screen.

Caveat Emptor

As you'll see and should expect, there is a difference between using <div> and <span>. You should also expect vendor variations, like different fonts.

The Components

From here on the article is about CSS and a description of each class component. I will not delve too deeply into the repercussion.

Click the following link to open the raw CSS overlay file at github.com - overlay.css

the wrapper

.wrapper {position:relative;width:200px;}

With this class, the position is relative and the width is set to the same as the image. This is so calculating the text position is easier.

the image

.bp_img {width:200px;margin:0 5%;border:black solid 1px;}

With this class we set the width of the image and give it some horizontal margin space. The thin border is to assist with this tutorial. It helps when trying to find the border of the image.

.fl {float:left;}

float image to the left

REMINDER: float is often used with images. There are side effects.

the text box to overlay

.textboxToOverlay {background:hsla(0, 75%, 50%, 0.5); text-align:center; width: 8em; }

With this class, we get a bit fancy. We add a translucent background to help the text show up. We center the text. And we set the width for the text box, otherwise we need to add padding to this region. (A padding of padding: 0 1em; would be equivalent.)

the text position:absolute

This section is important. It can also be confusing. The biggest reason is you must remember where you are relative to other objects. The most difficult part is deciding who is your nearest positioned ancestor.

The easiest way to do this is to put the wrapper down first, then the image, then start adding things around it. This means, DO NOT start from the top of the page and work down. It means put the image down, then add stuff above, then to the right and left.

Also keep in mind, if you are using a float, such as with an image, you will get thrown off. Be prepared.

.textPositionFromLeft { position: absolute; top: 7em; left: 1em; }

This positions the text seven (7) em units from the top of the wrapper, and one (1) em unit from the left of the wrapper.

Note, this is relative to the wrapper, not the image. So, if you change your wrapper, expect the overlay text to be in a different position.

Futher Reading

No reference is complete without the notes of PPK

  1. In fairness to previous authors, the latest W3C specification was not published until February 2015
  2. ancestor
    An ancestor node of any node A is any node above A in a tree model, where "above" means "toward the root."
    ~Source: Document Object Model (DOM) Level 3 Core Specification - glossary
  3. Definition of containing block
    If the element has 'position: absolute', the containing block is established by the nearest ancestor with a position other than static, in the following way: (...)
    ~Source: CSS Positioned Layout Module Level 3 - 3.1. Definition of containing block
  4. Absolute positioning
    In the absolute positioning model, a box is explicitly offset with respect to its containing block.
    ~Source: CSS Positioned Layout Module Level 3 - 6.3. Absolute positioning


Content Network Distribution by: