zZzzZ.
home
/
rotary
/
public_html
/
wp-content
/
plugins
/
bearsthemes-addons
/
assets
/
css
New Folder
Editing: _hot-spot.scss
Save
Cancel
@-webkit-keyframes hotspotEffect { 0% { -webkit-box-shadow: 0 0 0 0 #002866; } 70% { -webkit-box-shadow: 0 0 0 8px rgba(#002866, .2); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(#002866, .2); } } @keyframes hotspotEffect { 0% { box-shadow: 0 0 0 0 #002866; } 70% { box-shadow: 0 0 0 8px rgba(#002866, .2); } 100% { box-shadow: 0 0 0 0 rgba(#002866, .2); } } .elementor-image-hotspot { position: relative; img { width: 100%; height: auto; } &__item { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); &.active { .elementor-image-hotspot { &__content, &__icon:before { opacity: 1; visibility: visible; } } } } &__content { position: absolute; bottom: 100%; left: 50%; width: 200px; font-size: 16px; line-height: 1.5; text-align: center; color: #FFFFFF; background: $main-color; padding: 12px; border-radius: 4px; z-index: 3; opacity: 0; visibility: hidden; -webkit-transform: translate(-50%, -14px); transform: translate(-50%, -14px); -webkit-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } &__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 14px; color: #FFFFFF; background: $main-color; cursor: pointer; border-radius: 30px; animation: hotspotEffect 2s infinite; &:before { content: ""; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; background: $main-color; opacity: 0; visibility: hidden; -webkit-transform: translate(-50%, -20px) rotate(45deg); transform: translate(-50%, -20px) rotate(45deg); -webkit-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } svg { fill: #FFFFFF; width: 14px; height: auto; } } }