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).
I modified your CSS slightly. The main changes were adding
position: relative;
to the parent element andposition: absolute;
to the caption.CSS:
Demo: http://jsfiddle.net/XjthT/6/