JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="menu_block">
    <div class="menu_item">three</div>
    <div class="menu_item">two</div>
    <div class="menu_item">one</div>    
</div>

<img class='image' src="https://dl.dropboxusercontent.com/u/825859/hands/f3.jpg" usemap="#map"/>
<img class='image' src="https://dl.dropboxusercontent.com/u/825859/hands/f2.jpg" usemap="#map"/>
<img class='image' src="https://dl.dropboxusercontent.com/u/825859/hands/f1.jpg" usemap="#map"/>
<img class='base' src="https://dl.dropboxusercontent.com/u/825859/hands/base.jpg" usemap="#map"/>


<map name="map">
    <area shape="poly" id="f3" class="maps"  coords="278, 203, 315, 233, 367, 86, 360, 69, 344, 67" />
    <area shape="poly" id="f2" class="maps" coords="220, 209, 263, 209, 261, 44, 251, 31, 235, 36" />
    <area shape="poly" id="f1" class="maps" coords="162, 228, 208, 210, 155, 60, 137, 57, 126, 67" />
</map>

CSS

.menu_block {
    overflow: hidden;
}

.menu_item {
    float: left;
    margin-right: 15px;    
}

img {
    position: absolute;
}

map, img {
    -webkit-transform:scale(0.8);
}

map, area {
    display: block;
}

JavaScript

$('.maps, .menu_item').on({
    mouseout: function() {
        var index = $(this).index();
        $('.image').eq(index).css('z-index', 0);
    },
    mouseover: function() {
        var index = $(this).index();
        $('.image').eq(index).css('z-index', 1);
    }
});