JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div class="portfolio-map">
<div class="mobshow"><img src="http://perennialrealestate.com.sg/images/map-china-2015.png" width="700" height="680" alt="Map" /></div>
<div class="map-china">
<div id="port-1">
<a class="port-1" title="BEIJING TONGZHOU INTEGRATED DEVELOPMENT PHASE 1">BEIJING TONGZHOU INTEGRATED DEVELOPMENT PHASE 1</a>
<div class="port-1-pos"><img src="" /></div> 
<div class="port-1-img pos-img"><img src="http://perennialrealestate.com.sg/images/beijing-tongzhou-integrated-dev-phase-1.jpg" /></div> 
</div>
    
<div id="port-2">
<a class="port-2" title="BEIJING TONGZHOU INTEGRATED DEVELOPMENT PHASE 2"></a>
<div class="port-2-pos"><img src="" /></div> 
 </div>
<a class="port-3" title="CHENGDU EAST HIGH SPEED RAILWAY INTEGRATED DEVELOPMENT PLOT C"></a>
<a id="port-4" title="CHENGDU EAST HIGH SPEED RAILWAY INTEGRATED DEVELOPMENT PLOT D"></a>
<a id="port-5" title="PERENNIAL INTERNATIONAL HEALTH AND MEDICAL HUB, CHENGDU"></a>
<a id="port-6" title="PERENNIAL JIHUA MALL, FOSHAN"></a>
<a id="port-7" title="PERENNIAL QINGYANG MALL, CHENGDU"></a>
<a id="port-8" title="SHENYANG LONGEMONT OFFICES"></a>
<a id="port-9" title="SHENYANG LONGEMONT SHOPPING MALL"></a>
<a id="port-10" title="SHENYANG RED STAR MACALLINE FURNITURE MALL"></a>
<a id="port-11" title="XI'AN NORTH HIGH SPEED RAILWAY INTEGRATED DEVELOPMENT PLOT 4"></a>
<a id="port-12" title="XI'AN NORTH HIGH SPEED RAILWAY INTEGRATED DEVELOPMENT PLOT 5"></a>
<a id="port-13" title="ZHUHAI HENGQIN INTEGRATED DEVELOPMENT"></a>
</div>
</div>

CSS

.portfolio-map { position: relative; }
#port-1 { position: absolute; top: 30px; left: 200px;  }
.port-1 { background: red; width: 280px; height: 50px; display: block;  }
.port-1-pos { border-right: 1px solid red; height: 200px; }
.port-1-img { top: -117px; left: 0; position: absolute; }
.pos-img { display: none; }

#port-2 { position: absolute; top: 100px; left: 180px;  }
.port-2 { background: red; width: 250px; height: 50px; display: block;  }
.port-2-pos { border-right: 1px solid red; height: 100px; }

JavaScript

$(document).ready(function(){
    $('#port-1').on('hover', function(){
    $('.pos-img').show();
    });
});