JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <body>
        <div class="box">
            <img src="http://lorempixel.com/640/480/">
            <div class="caption">Some Text</div>
        </div>
    </body>
</html>

CSS

body{
    background-color:red; 
}
.box {
    background-color:yellow;
    position:relative;
    width:100%;
    height:100%;
}.box img {
    opacity:0.5;
    display:block;
    height:auto;
    width:auto;
    max-width:100%;
    max-height:100%;
}
.box .caption{
    background:#000;
    padding:5px;
    color:#FFF;
    position:absolute;
    top:5px;
    left:5px;
}