JSFiddle - React, Tailwind, and code Playground

by kyong

HTML

<div id="detail">
    <div id="div1" style="display:none">CONTENT 1</div>
    <div id="div2" style="display:none">CONTENT 2</div>
    <div id="div3" style="display:none">CONTENT 3</div>
    <div id="div4" style="display:none">CONTENT 4</div>
</div>


<div id="links">
    <a href="#" name="div1" ><img src="http://2.imimg.com/data2/SD/HL/MY-3327228/i20-hyundai-cars-250x250.jpg" /></a>
        <a href="#" name="div2" ><img src="http://www.stacksandstacks-static.com/images/product/119912_bu.jpg" /></a>
       <a href="#" name="div3" ><img src="http://4.bp.blogspot.com/-wEhdk5tEQPQ/TYmBFgjepHI/AAAAAAAAAqM/6TX2KvHmNTc/s400/Automobiles-Car-Ferrari-458-Italia-1.jpg" /></a>
       <a href="#" name="div4" ><img src="http://3.bp.blogspot.com/_ePFTVFtDp34/RnRLCPEgM9I/AAAAAAAAAd8/MBhBblc_Gjs/s400/31a2nl1GJNL._AA250_" /></a>
    
</div>

CSS

#detail {
    width:250px;
    height:250px;
    position:relative;
    margin-bottom:12px;
    border: 1px solid #000000;
}
#detail div {
    color:#ffffff;
    position:absolute;
    bottom:0;
    text-align:center;
    width:100%;
    background: #000000;
    opacity: .8;
}
#links img {
    width:30px; 
    height:30px; 
    margin-left:16px;
}

JavaScript

$('a').hover(function(){
var active=$("#"+this.name);
    var img=$(this).find('img')[0]src;
    $('#detail').css('background-image', 'url('+img+')');
    active.siblings().hide();
    active.fadeIn("slow");


});