Responsive, transparent CSS image title with graceful degradation?

Question

What is the right way to create sensitive, transparent CSS labels over images - with graceful degradation in older browsers?

I am trying to achieve:

• Centered Vertical Image Column
• Images are equal in height and width
• Each image has a title that needs to be centered.
• The inscription should have a transparent background.
• It would be nice if the background turned black in older browsers that do not support transparency.

If you look at this example script , there is clearly not the case.

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 CSS3 code is where we get some problems. Is this the right approach? I got it to work with some fine tuning (not turned on), but fine tuning doesn't seem to make sense to me.

For example, this is the result:

I have the feeling that CSS is incorrect at many levels (pun intended).

Answer 1

I changed your CSS a bit. The main changes were to add position: relative; to the parent element and position: absolute; in the signature.

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/