JSFiddle - React, Tailwind, and code Playground

HTML

<div class="portfolioImage">
<div class="footerBar">A Sample Image</div>
     <div class="image_frame" 
     style="background-image: url('http://placekitten.com/200/150');"</div>
</div>

CSS

.portfolioImage {
    width: 200px;
    height: 150px;
    position: relative;
    
}

.footerBar {    
     position: absolute;
     padding-top:50%;
     overflow:hidden;
     width:100%;
     height:20%;
     color:#000;
	 transform: translateY(-50%);
     text-align:center;
     z-index:1;
}

.image_frame {
    width:100%;
    height:100%;
    -webkit-transition: all 0.3s ease;
	-moz-transition:    all 0.3s ease;
    -o-transition:      all 0.3s ease;
    ms-transition:     all 0.3s ease;
    transition:         all 0.3s ease; 
    position:absolute;
    z-index:2;
    opacity: 1.0;    
}

.lowerOpacity { opacity:0.4; }

JavaScript

$('.portfolioImage').hover(
    function(){
         $(this).find(".image_frame").addClass("lowerOpacity");
}, function(){
     $(this).find(".image_frame").removeClass("lowerOpacity");
});