JSFiddle - React, Tailwind, and code Playground

HTML

<div class='slideshow-wrapper'>
    <img src='http://www.placekitten.com/800/300'/>
    <h2 class='title'>Some title</h2>
</div>

CSS

.slideshow-wrapper {
    position:relative;
    float: left;
}
.title {
    position: absolute;
    color: #fff;
    font-size: 25px;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}
.slideshow-wrapper:before {
    content: '';
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    z-index: 1;
}