JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class="menu">
    <div class="menu-item">
        <img class="billet" src="http://imm.io/14DzT" alt="" usemap="#fancy_img" width="100%" />
        <map name="fancy_img">
            <area shape="poly" coords="54,12,210,12,172,167,15,167" href="google.com" alt="" title="google.com" />
            <img class="img" src="http://cuboro.org/uploads/images/kartinki_4.jpg" alt="" />
            <div class="text">menu-item1</div>
        </map>
    </div><!--.menu-item-->
</div><!--.menu-->
<img src="http://cuboro.org/uploads/images/kartinki_4.jpg" alt="" />

CSS

.menu-item {
    display: inline-block;
    width: 150px;
    height: 177px;
    position: relative;
    margin: 0 -38px 10px 0;
    z-index: 4;
/*    background: red;*/
}
.menu-item .billet {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: url('http://jsfiddle.net/img/logo.png') 0 0 no-repeat;
}
map {
    position: relative;
    z-index: 100;
    background: blue;
    width: 100px;
    height: 100px;
}
.menu-item .img {
position: absolute;
width: 197px;
height: 155px;
top: 12px;
left: 15px;
z-index: 8;
border: 4px solid red;
}
area:hover ~ .img {
    display: block;
}
body {
    background: url('http://cuboro.org/uploads/images/kartinki_4.jpg');
}