JSFiddle - React, Tailwind, and code Playground

HTML

<div class="leftContainer">
    <div class = "promo">
         <img src="http://www.libpng.org/pub/png/img_png/toucans.jpg" width="415" height="200" alt="soon event" />

         <div class="hilight">

                <h2>Hockey</h2>
                <p>Sample text</p>

         </div>

     </div>

     ...

</div>

CSS

.hilight h2{
    font-family: Helvetica, Verdana;
    color: #FFF;
    z-index: 200;
}

.promo {
    position: relative;
}
.promo img {
    z-index: 1;
}

.hilight {

    background:url(http://1x1px.me/000000-0.65.png);
    position: absolute;
    height: 85px;
    width: 415px;

    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    bottom: 0px;
    z-index: 1;
}