JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnail">
            <img src="https://s3.amazonaws.com/discount_now_staging/uploads/ed964a11-e089-4c61-b927-9623a3fe9dcb/direct_uploader_2F50cc1daf-465f-48f0-8417-b04ac68a999d_2FN_19_jewelry.jpg" alt="..." width="  " />
            <div class="caption post-content">
 
            </div>
 <div class="details">

                <h3>Robots!</h3>
                <p>Lorem ipsum dolor sit amet</p> 

            </div>       </div>

CSS

.post-content {
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    opacity: 0.5;
    top:0;
    left:0;
    min-width: 500px;
    min-height: 500px; 
    position: absolute;
    color: #ffffff; 
}

.thumbnail{
    position:relative;
    
}
.details {
    position: absolute; 
    z-index: 2; 
    color: #ffffff; 
}