Use a single element, with a pseudo element (:before) for the featured image, and appropriate hover styling to set its opacity and reveal a blend with the underlying second image. I threw in a gradual image transition just to make it look a little nicer.
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('//some-url-to-second-image');
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('//some-url-to-featured-image');
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;
}