.bc-image-hotspots {
position: relative;
width: fit-content;
}
.bc-image-hotspots__img{
width: 100%;
height: 100%;
object-fit: cover;
}
.bc-image-hotspots__hotspot {
position: absolute;
cursor: pointer;
outline: unset;
left: 20%; top: 20%; min-width: 20px; min-height: 20px; width: fit-content; height: fit-content; background: #c23616; border-radius: 15px; padding: 5px 10px; --wave-duration: 1s;
--wave-intensity: 10px;
--wave-color: #c23616;
--reveal-duration: 0.4s;
--y-distance: 100%;
--x-distance: 100%;
animation: wave var(--wave-duration) infinite;
}
@keyframes wave {
from {
box-shadow: 0 0 0 0 var(--wave-color);
}
to {
box-shadow: 0 0 0 var(--wave-intensity) #c2351600;
}
}
.bc-image-hotspots__tooltip { all: unset;
width: max-content;
position: absolute;
background: white; padding: 5px 10px; border-radius: 3px; transition: opacity var(--reveal-duration);
display: block;
opacity: 0;
pointer-events: none;
}
.bc-image-hotspots__hotspot[data-arrow=top] .bc-image-hotspots__tooltip{ bottom: var(--y-distance);
left: 50%;
transform: translateX(-50%);
}
.bc-image-hotspots__hotspot[data-arrow=bottom] .bc-image-hotspots__tooltip{ top: var(--y-distance);
left: 50%;
transform: translateX(-50%);
}
.bc-image-hotspots__hotspot[data-arrow=left] .bc-image-hotspots__tooltip{ right: var(--x-distance);
top: 50%;
transform: translateY(-50%);
}
.bc-image-hotspots__hotspot[data-arrow=right] .bc-image-hotspots__tooltip{ left: var(--x-distance);
top: 50%;
transform: translateY(-50%);
}
.bc-image-hotspots__tooltip::after { all: unset;
content: '';
--bordercolor: white;
border-color: transparent transparent var(--bordercolor);
border-width: 0 8px 6px;
border-style: solid;
position: absolute;
transition: opacity var(--reveal-duration);
display: block;
opacity: 0;
pointer-events: none;
}
.bc-image-hotspots__hotspot[data-arrow=top] .bc-image-hotspots__tooltip::after { bottom: -6px;
left: 50%;
transform: translateX(-50%) rotate(180deg);
}
.bc-image-hotspots__hotspot[data-arrow=bottom] .bc-image-hotspots__tooltip::after { top: -6px;
left: 50%;
transform: translateX(-50%);
}
.bc-image-hotspots__hotspot[data-arrow=left] .bc-image-hotspots__tooltip::after { right: -10px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
}
.bc-image-hotspots__hotspot[data-arrow=right] .bc-image-hotspots__tooltip::after { left: -10px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
}
.bc-image-hotspots__hotspot.bc-image-hotspots__hotspot--focused .bc-image-hotspots__tooltip,
.bc-image-hotspots__hotspot.bc-image-hotspots__hotspot--focused .bc-image-hotspots__tooltip::after{
opacity: 1;
pointer-events: all;
}
.bc-image-hotspots__hotspot[data-hotspot=triggered] .bc-image-hotspots__tooltip, 
.bc-image-hotspots__hotspot[data-hotspot=triggered] .bc-image-hotspots__tooltip::after{
opacity: 1;
pointer-events: all;
}
.bc-image-hotspots__hotspot[data-bc-hide]{
opacity: 0;
}