JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	
<div class="row-fluid" id="homepage-spotlight">
    
<div class="feature" align="center">
	<img class="pshow" id="preview" src="http://i.imgur.com/yuiHc20.png" alt=""/>
	<img class="pshow story1" style="display:none" src="#" />
	<img class="pshow story2" style="display:none" src="#" />
	<img class="pshow story3" style="display:none" src="#" />
        <img class="pshow story4" style="display:none" src="#" />
</div>

<div class="jdlthumbnail">
    <div class="jdlh2"><span>Large Image Features Will Give More Pop.</span><div style="font-size:17px">by Ebenezer Ekuban</div></div>
    
<div class="hover"  id="story1">
    <a href="#"><h2 class="jdlh2b">Story #1 Text<br>Teaser</h2></a>
</div>

<div class="hover"  id="story2">
    <a href="#"><h2 class="jdlh2b">Story #2 Text<br>Teaser</h2></a>
</div>

<div class="hover"  id="story3">
    <a href="h#"><h2 class="jdlh2b">Story #3 Text<br>Teaser</h2></a>
</div>

<div class="hover"  id="story4">
    <a href="#"><h2 class="jdlh2b">Story #4 Text<br>Teaser</h2></a>
</div>
    

</div>
</div>
</div>

</body>

CSS

<style>
.jdlthumbnail img {
	width: 100%;
}

.feature, .pshow {
    width: 628px;
    height: 295px;
}

#jdlmainevent{
    width: 628px;
}

#jdl3event{
    width: 628px;
    height: 170px;
}

.tab-pane.active{
    float: left;
}

.jdlh2 { 
    color: white; 
    font: 25px Sans-Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0);
    float: left;
    width: 628px;
    text-align: center;
}

.jdlh2b { 
    color: white; 
    font: 20px Sans-Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0);
    float: left;
    width: 157px;
    text-align: center;
}

#jdlmainevent img {
    float:left;
}

#jdl3event img {
    float:left;
}

#jdl-featured-event {
    float: left;
    width: 207px;
}

.sidebar-widget-container{
	width: 300px;
	float: right;
	background: #ffffff;
}

#homepage-spotlight{
	width: 628px;
}

#jdlbody{
	background: #ffffff;
}

.header-nav.navbar-fixed-top.locally-branded {
	width: 100%;
}

.navbar {
	border-bottom-width: 0px;
}

.page-top{
	background: #f1f1f1;
	width: 100%;
}


</style>

JavaScript

$(document).ready(function () {
    $('.hover').mouseenter(function() {
      var currentId = $(this).attr("id");
      $('.pshow').hide();
      $('.feature').find('.' + currentId).toggle();
    });
});