How to Create Image Hotspot in Elementor

 

 

Code snippet used in Flip Box Widget

selector{
    --hotspot-color: #FD4766;
    --hotspot-size: 15px;
}
selector .elementor-icon i{
    height: var(--hotspot-size);
    width: var(--hotspot-size);
    background: var(--hotspot-color);
    border-radius: 50%;
}
selector .elementor-icon i:before, selector .elementor-icon i:after{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--hotspot-color);
    border-radius: 100%;
    opacity: 0.2;
    animation: zoom 2s infinite;
}
selector .elementor-icon i:before{
    animation-timing-function: ease-in;
}
selector .elementor-icon i:after{
    animation-timing-function: ease-out;
}
@keyframes zoom{
    0%{ transform: scale(1); }
    100%{ transform: scale(2); }
}
selector .elementor-flip-box__back{
    z-index: 1;
}
selector{
    transform: translate(-50%,-50%);
}

 

Code snippet to align Column Center

selector{
    margin: auto;
}