JSFiddle - React, Tailwind, and code Playground

HTML

<div id="home-pictures">
    <a href="http://mikloswe.nextmp.net/apassociates/page/conservatory">
    <div id="home-1" style="background-image: url(http://www.gravatar.com/avatar/bfeca75af4b724e61197e63fc85dc112/?default=&s=80);">        
        </div>
    

     
    
 
<div id="dual" style="background-image:url(https://launchbit.com/carbon-i/6707-ToptalCarbon123.jpg);"> </div> 
  
            <span class="home-link">Traditional</span>

    <a href="http://mikloswe.nextmp.net/apassociates/page/blackbrookhouse">
        <div id="home-2" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/carehome-caption.png);">
            <span class="home-link">Commercial</span>
        </div>
    </a>
    <a href="http://mikloswe.nextmp.net/apassociates/page/floodproof">
        <div id="home-3" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/submersible-caption.png);">
            <span class="home-link">Innovative</span>
        </div>
    </a>
</div>

CSS

#home-pictures {
    height: 250px;
}
#home-pictures {
    text-align: center;
}
#home-pictures a:link,
#home-pictures a:visited {
    color: #B43104;
    display: block;
    text-decoration: none;
}
#home-1, #home-2, #home-3 {
    margin-left: 20px;
    float: left;
    height: 256px;
    width: 285px;
    zoom: 1;
}
.home-link {
    color: #B43104;
    display: block;
    float: left;
    font-family: 'book antiqua', palatino, serif;
    font-size: 24px;
    margin-left: 15px;
    position: relative;
    top: 220px;
}
#dual{height:265px;width:285px;opacity:0;}

JavaScript

// home links
$('div#home-1, div#home-2, div#home-3').mouseenter(function () {
    $(this).css({
        'filter' : 'alpha(opacity=50)',
        'opacity' : '0.0'
    }); $('#dual').css({
        'filter' : 'alpha(opacity=50)',
        'opacity' : '1.0','border':'solid red 1px'});
}).mouseleave(function () {
  $(this).css({
        'filter' : 'alpha(opacity=100)',
        'opacity' : '1.0'
    }); $('#dual').css({
        'filter' : 'alpha(opacity=50)',
        'opacity' : '0.0'});
});