JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img-wrapper">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTR5W9lOB796wQm-AMCmEhjcto17HDRGdLaqvTxpoHwc3Tw7epxzw"/>
    <p>White text here</p>
</div>

CSS

.img-wrapper{
    width: 100%;
    height: 100%;
    background: #000;    
}
img {
      width: 100%
        height: 100%;
        opacity: .5;
}
img:hover{
    opacity: .3;
}
p {
    color: white;
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 20px;
}