Align figcaption to bottom of image in figure

Question

<figure>
     <img src="http://lorempixel.com/x/x" alt="figure">
     <figcaption>Nam elementum non massa at mattis.</figcaption>
</figure>

I'm creating a CSS file and want to place the figcaption with 100% width and a semi-transparent background-color on top of the image, but I want the bottom of the figcaption box and the bottom of the image to always be the same regardless of what image is used.

Answer 1

Use absolute positioning on the figcaption element. Don't forget to set "position: relative" on the figure element, too. Here's an example: http://jsfiddle.net/armordecai/xL1bk6k7/

figure {
     position: relative;
}
figure img {
    display: block;
}
figcaption {
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}