JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class='building'><img src='http://i58.tinypic.com/34gqaue.png'>
    <a class='first floor' href='url1'></a>
    <a class='second floor' href='url1'></a>  
    <a class='third floor' href='url1'></a>   
    <a class='fourth floor' href='url1'></a>  
</div>

CSS

.building img{
    display:block;
    width:200px;
    height:200px;
    z-index:0;
}
.building{
    position:relative;
}
.floor{
    display:block;
    position:absolute;
    left:15px;
    background:#f00;
    opacity:0;
    height:40px;
    width:170px;
    z-index:100;
   /* transition:opacity .3s ease-in; можно еще и transition прикрутить для прикола) */
}
.floor:hover{
    opacity:.5;
}
.first{
    bottom:0;
}
.second{
    bottom:40px;
}
.third{
    bottom:80px;
}
.fourth{
    bottom:120px;
}