JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-image-holder">
    text and other contents we don't want affected by opacity
</div>

CSS

.my-image-holder{
    position: relative;
    z-index:1;
    width:200px;
    height:200px;
    margin:30px;
    background-image: url('http://lorempixel.com/200/201/');
    background-size: contain;
    font-size: 1.2em;
    color: white;
}
.my-image-holder:before{
    z-index:-1;
    position:absolute;
    width:200px;
    height:200px;
    left:0;
    top:0;
    content: url('http://lorempixel.com/200/200/');
    opacity:1.0;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
.my-image-holder:hover:before{
    opacity:0.5;
}