Hotspots

Hotspots

Custom CSS

It is possible to override most of the CSS for the hotspot and it's content box. 

Here you find the default CSS. 

Be careful, overriding the CSS may break the 360 view.

/** default spot settings, initially not visible **/
.hotspot-spot {
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 11;
    pointer-events: auto;
    transition: 0.2s width, 0.2s height, 0.2s opacity;
}

/** shadow for the spot **/
.hotspot-spot.spot-shadow {
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
    0 2px 2px rgba(0, 0, 0, 0.11),
    0 4px 4px rgba(0, 0, 0, 0.11),
    0 6px 8px rgba(0, 0, 0, 0.11),
    0 8px 16px rgba(0, 0, 0, 0.11);
}

/** pulse animation for the spot **/
.hotspot-spot.pulse {
    background-image: none;
}

.hotspot-spot.pulse::after, .hotspot-spot.pulse::before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    border-radius: 100%;
    content: '';
}

.hotspot-spot.pulse::before {
    transition: opacity .2s ease-in, transform .1s ease-out;
    background-color: #ff0;
    opacity: .8;
    overflow: hidden;
}

.hotspot-spot.pulse::after {
    border: 1px solid #ff0;
    opacity: 0;
    box-sizing: border-box;
    -webkit-animation: pulse-start 3s ease-out infinite;
    animation: pulse-start 3s ease-out infinite;
    pointer-events: none;
}

.hotspot-spot.pulse:hover::before {
    cursor: pointer;
    opacity: .8;
}

.hotspot-spot.pulse:active::before {
    transform: scale(.875);
}

.hotspot-spot.pulse:hover::after {
    -webkit-animation: none;
    animation: none;
}

.hotspot-spot.pulse:active::after {
    -webkit-animation: pulse-stop .3s;
    animation: pulse-stop .3s;
}

@-webkit-keyframes pulse-start {
    0% {
        transform: scale(1);
        opacity: .8;
    }
    45% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse-start {
    0% {
        transform: scale(1);
        opacity: .8;
    }
    45% {
        transform: scale(2);
        opacity: 0;
    }
}

@-webkit-keyframes pulse-stop {
    from {
        opacity: .4;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse-stop {
    from {
        opacity: .4;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}


/** hotspot content **/
.hotspot-content {
    box-sizing: border-box;
    position: absolute;
    display: none;
    max-width: 80%;
    transition: 0.4s all;
    z-index: 202;
    max-height: 90%;
}

.hotspot-content-default {
    box-shadow: 1px 1px 8px #999;
    background-color: #fff;
    color: #333;
    padding: 15px;
    border-radius: 4px;
}

.hotspot-content iframe {
    width: 100%;
}

.hotspot-content img {
    max-width: 100%;
    display: block;
    margin: auto;
}

/** positioning of the hotspot content box **/
/** top left **/
.hotspot-content-tl {
    left: 10px;
    top: 15px;
}
/** top right **/
.hotspot-content-tr {
    right: 15px;
    top: 15px;
}

/** top bottom right **/
.hotspot-content-br {
    right: 15px;
    bottom: 10px;
}

/** bottom left **/
.hotspot-content-bl {
    left: 10px;
    bottom: 10px;
}

/** close button for the hotspot content **/
.hotspot-content-close {
 z-index: 300;
 position: absolute;
 right: -10px;
 top: -10px;
 width: 25px;
 height: 25px;
 text-align: center;
 border-radius: 50%;
 background-color: #000;
 color: #fff;
 font-size: 26px;
 line-height: 1;
 cursor: pointer;
 transition: 0.3s all;
}

.hotspot-content-close:hover {
 background-color: #cc0000;
}