JSFiddle - React, Tailwind, and code Playground

by Slezi

HTML

<div class="imageContainer">
    <div>
        <img src="http://dummyimage.com/300x1000" />
        <span>...caption...</span>
    </div>
</div>

CSS

.imageContainer {
    text-align: center;
}
.imageContainer img {
    display: block;
}
.imageContainer div {
    position: relative;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1;
}
.imageContainer span {
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.5);
}