Custom CSS
You can override most of the CSS for the hotspot marker and its content box (the popup that appears when a hotspot is clicked).
Below is the default CSS used in the 360° viewer. Copy and adapt it in your own stylesheet to customize appearance.
Note: Changing or removing selectors may break hotspot behavior in the 360 view. Prefer overriding properties (e.g. colors, sizes) rather than changing layout or display in ways that affect positioning.
CSS reference
-
.hotspot-spot— The clickable marker on the 360 view. Modifiers:.spot-shadow(drop shadow),.pulse(animated pulse). -
.hotspot-content— The popup container. Use.hotspot-content-defaultfor the default box style. -
.hotspot-content-tl,.hotspot-content-tr,.hotspot-content-br,.hotspot-content-bl— Position of the content box (top-left, top-right, bottom-right, bottom-left). -
.hotspot-content-close— The close button on the content popup.
Default CSS
/** 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;
}
/** 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;
}