.imagemap {
    position: relative;
    display: inline-block;
    /*background-color: rgba(255, 0, 0, .4);
    border: 1px solid yellow;*/
}
.imagemap.highlighted {
    position: relative;
    display: inline-block;
    background-color: rgba(10, 144, 153, 0.20);
    border: 3px solid rgba(10, 144, 153, 1.0);
}
.imagemap .imagemapname {
    visibility: hidden;

    background-color: rgba(29, 30, 38,.8);
    color: rgba(212, 212, 213, 1);
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    width: 120px;
    top: 0%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.imagemap:hover .imagemapname {
    visibility: visible;
}
.imagemap:hover {
    background-color: rgba(10, 144, 153, 0.30);
    border: 1px solid black;
}