Make an Orbiting Circle Image Hover Effect/Animation in Elementor

 

 

CSS Code Snippet for Container (mdw-image-circle):

selector{
    --rotate-speed: 5s;
}
selector{
    height: var(--width);
    --diameter: var(--width);
    padding: 0;
}
body{
    overflow-x: hidden;
}
selector .elementor-widget-html{
    position: absolute;
}

 

CSS Code Snippet for Container (mdw-orbit-images):

selector{
    --image-active-border: #FF0058;
}
selector .elementor-widget-image{
    transform: rotate(calc(360deg*(var(--index,1) - 1)/var(--image-amount,8) + 90deg));
    transform-origin: calc(50% + (var(--diameter,600px) - var(--con-border-w,2px))/2 - 1px*var(--inside,0));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
selector .elementor-widget-image .elementor-widget-container{
    transform: rotate(calc(-360deg*(var(--index,1) - 1)/var(--image-amount,8) - 90deg));
}
selector .elementor-widget-image .elementor-widget-container,
selector .elementor-widget-image img{
    transition: none !important;
}
selector.tr .elementor-widget-image .elementor-widget-container,
selector.tr .elementor-widget-image img{
    transition: all 0.3s ease-in-out !important;
}
selector .elementor-widget-image.active img{
    filter: brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );
}
selector .elementor-widget-image.active .elementor-widget-container{
    box-shadow: 0px 0px 0px 4px var(--image-active-border,#FFFFFF);
}
selector{
    --inside: 0;
    transform: translateX(calc(-50% + 1px*var(--inside,0) - var(--con-border-w,2px)/2 ));
}

@media (max-width: 767px){
selector{
    --inside: 10;
}
}

 

JavaScript Code Snippet for Orbiting Circle Image Hover Effect:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery

$(document).ready(function(){

$('.mdw-image-circle').each(function(){

var parent = $(this),
    imageContainer = parent.find('.mdw-orbit-images'),
    contentContainer = parent.find('.mdw-center-content'),
    activeImage = imageContainer.find('.elementor-widget-image.active'),
    prevIndex = activeImage.length ? activeImage.eq(0).index() : 0,
    content = contentContainer.find('.e-con, .e-container'),
    images = imageContainer.find('.elementor-widget-image')
    
parent.css('--image-amount', images.length)
parent.css('--con-border-w', parent.css('border-top-width'))

images.each(function(){
    $(this).css('--index', $(this).index() - images.eq(0).index() + 1)
})

setTimeout(function(){
    imageContainer.addClass('tr')
},100)

images.hover(function(){
    
var $this = $(this),
    index = $this.index()

if(!content.eq(index).length) return

images.removeClass('active')
$this.addClass('active')

if(index == prevIndex) return

if(!contentContainer.hasClass('tr')){
    contentContainer.addClass('tr')
}

content.removeClass('inactive active')
content.eq(prevIndex).addClass('inactive')
content.eq(index).addClass('active')

prevIndex = index

}, function(){})

})

})
</script>

 

CSS Code Snippet for Container (mdw-center-content):

selector > .e-con,
selector > .e-container{
    opacity: 0;
}
selector > .e-con.active,
selector > .e-container.active{
    opacity: 1;
    z-index: 10;
}
selector.tr > .e-con.active,
selector.tr > .e-container.active{
    animation: comeIn 0.3s ease-in-out;
}
selector > .e-con.inactive,
selector > .e-container.inactive{
    animation: comeOut 0.3s ease-in-out;
}
selector .elementor-social-icon:hover{
    opacity: 1;
}
@keyframes comeIn{
0%{
    transform: rotate(20deg) translateX(20%) scaleY(0.5) skew(-20deg);
    opacity: 0;
}
100%{
    transform: rotate(0deg) translateX(0%) scaleY(1);
    opacity: 1;
}
}

@keyframes comeOut{
0%{
    transform: rotate(0deg) translateX(0%) scaleY(1);
    opacity: 1;
}
100%{
    transform: rotate(-20deg) translateX(-20%) scaleY(0.5) skew(20deg);
    opacity: 0;
}
}

 

CSS Code Snippet for Divider Widget (Bigger Inner Circle):

selector{
    --other-border-color: #ffffff;
}
selector .elementor-widget-container{
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right-color: var(--other-border-color,#ffffff) !important;
    animation: rotate var(--rotate-speed,5s) linear infinite;
}
selector{
    --divider-border-width: calc(var(--container-widget-width) - 2*2px) !important;
    overflow: hidden;
}
@keyframes rotate{
0%{
    transform: rotate(0deg);
}
100%{
    transform: rotate(360deg);
}
}

 

CSS Code Snippet for Divider Widget (Smaller Inner Circle):

selector{
    --other-border-color: #ffffff;
}
selector .elementor-widget-container{
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-right-color: var(--other-border-color,#ffffff) !important;
    animation: rotate calc(var(--rotate-speed,5s)/2) linear infinite reverse;
}
selector{
    --divider-border-width: calc(var(--container-widget-width) - 2*2px) !important;
    overflow: hidden;
}