JSFiddle - React, Tailwind, and code Playground

by Laurie

HTML

<div id="page-wrap">
    <div class="image">
        <img src="http://css-tricks.com/examples/TypeOverImage/images/3754004820_91a5c238a0.jpg" alt="" />
         <h2>A Movie in the Park:<br />Kung Fu Panda</h2>

    </div>
    <div class="image">
        <img src="http://css-tricks.com/examples/TypeOverImage/images/3704755264_25a5e6958b.jpg" alt="" />
         <h2>Breaking News:<br />Hippies Love America!</h2>

    </div>
</div>

CSS

#page-wrap {
    width: 500px;
    margin: 20px auto;
}
.image {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}
h2 {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
}
h2 span {
    color: white;
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}
h2 span.spacer {
    padding: 0 2px;
    background: none;
}