JSFiddle - React, Tailwind, and code Playground

by dipish

HTML

<div class="floorplan">
    <div class="area area-hair">
        <i class="point"></i>
        <img class="popup" src="http://i.imgur.com/8tV05PF.png" />
    </div>
</div>

CSS

.floorplan {
    width: 596px;
    height: 492px;
    background: url(http://nikita.tstevart.ru/magnifica-salon.ru/design/img/ms.jpg) no-repeat;
    position: relative;
}
.area {
    position: absolute;
}

.area-hair {
    left: 70px;
    top: 250px;
}
.area .point {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 33px;
    height: 33px;
    cursor: pointer;
    background: url(http://nikita.tstevart.ru/magnifica-salon.ru/design/img/sprite.png) -10px -90px;
    z-index: 1000;
}

.area .popup {
    position: absolute;
}

.area-hair .popup {
    transition: all 0.3s;    
    width: 105px;
    height: 158px;
    top: -115px;
    left: -45px;
}
.area-hair:hover .popup {
    width: 162px;
    height: 246px;
    top: -195px;
    left: -75px;
}
}