.custom-hotspot-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.hotspot-image-container {
position: relative;
width: 100%;
}
.hotspot-image-container img {
width: 100%;
display: block;
}
.hotspot-point {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
.hotspot-icon {
width: 15px;
height: 15px;
background: var(--e-global-color-primary);
border-radius: 50%;
position: relative;
transition: var(--transition);
}
.hotspot-icon::before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 15px;
height: 15px;
background: var(--e-global-color-primary);
border-radius: 50%;
animation: dot-pulse 1500ms ease-out infinite;
transition: var(--transition);
}
.hotspot-icon:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 15px;
height: 15px;
background: var(--e-global-color-primary);
border-radius: 50%;
transition: var(--transition);
}
.hotspot-icon:hover {
background: var(--e-global-color-primary);
}
.hotspot-tooltip {
opacity: 0;
position: absolute;
transition: var(--transition);
top: 30px;
left: 20px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 5px;
width: 200px;
z-index: 9;
visibility: hidden;
min-width: 250px;
}
.hotspot-tooltip h4 {
margin-bottom: 10px;
font-family: var(--e-global-typography-secondary-font-family);
}
.hotspot-tooltip p {
margin: 0;
}
.hotspot-point:hover .hotspot-tooltip {
opacity: 1;
visibility: visible;
}
@keyframes dot-pulse {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2.2);
opacity: 0;
}
}