Responsive, transparent CSS image caption with graceful degradation?


What is the proper way to create responsive, transparent CSS captions over images — with graceful degradation in older browsers?

I am trying to achieve:

  • Centered vertical column of images
  • Images are equal heights and widths
  • Each image has a caption which should be centered
  • Caption should have a see-through background
  • Would be nice if the background became black in older browsers that don't support transparency

If you take a look at this Fiddle example, there's clearly a lot wrong with it.

The basic premise for HTML5 is:

        <img src="1.jpg">
        <figcaption>Caption 1</figcaption>

        <img src="2.jpg">
        <figcaption>Caption 2</figcaption>

        <img src="3.jpg">
        <figcaption>Caption 3</figcaption>

But the CSS3 code is where we get some problems. Is it the right approach even? I got it to work with some fine-tuning (not included), but the fine-tuning doesn't seem to make semantic sense to me anyway.

For example, this is the result:

enter image description here

I have a feeling the CSS is wrong on many levels (pun intended).

Problem courtesy of: Baumr


I modified your CSS slightly. The main changes were adding position: relative; to the parent element and position: absolute; to the caption.


section {
    overflow: auto;

section figure {
    float: left;
    clear: both;

    position: relative;
    overflow: auto;

    margin: 0 auto;
    padding: 30px 0 0 0;
    font-size: 15px;

section figure img {
    vertical-align: bottom;

section figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff; 
    padding: 10px;

section {
    padding-bottom: 30px;
    background: #ccc;



Solution courtesy of: Blender


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.