JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="containerImage"></div>
    <div class="containerText">Random ipsum text.</div>
</div>

CSS

.container {
    width: 250px;
    height: 250px;
    border: 1px solid #000;
    position: relative;
}
.containerImage {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url(http://www.flowerforyou.org/uploads/3/2/6/1/3261213/2399269.jpg);
}
.containerImage:hover {
    opacity:0.4;
    filter:alpha(opacity=40);
    /* For IE8 and earlier */
}
}
.containerText {
    position: absolute;
}