Responsive, transparent CSS image caption with graceful degradation?

css, graceful-degradation, html, image, responsive-design

Solution

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

CSS:

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;

}

Demo: http://jsfiddle.net/XjthT/6/

Problem

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: ``` <section> <figure> <img src="1.jpg"> <figcaption>Caption 1</figcaption> </figure> <figure> <img src="2.jpg"> <figcaption>Caption 2</figcaption> </figure> <figure> <img src="3.jpg"> <figcaption>Caption 3</figcaption> </figure> </section> ``` 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: I have a feeling the CSS is wrong on many levels (pun intended).

Original source