Elementor Shaking Image Hover Effects

 

 

CSS code snippet for Making Arrow:

selector .elementor-divider{
    position: relative;
}
selector .elementor-divider:before,
selector .elementor-divider:after{
    content: "";
    position: absolute;
    background: var(--divider-color);
    height: 2px;
    width: 9px;
    right: 0;
    top: 0;
    transform-origin: right;
    transform: rotate(45deg);
}
selector .elementor-divider:after{
    transform: rotate(-45deg);
}

 

CSS code snippet on Main Section:

selector{
    --hover-background: #181818;
    --hover-text-color: #ffffff;
}
.shake{
    cursor: pointer;
}
.shake.active{
    z-index: 10;
}
.shake .shake-square{
    transition: all 0.15s ease-in-out;
}
.shake.hover .shake-square{
    transform: scale(1.1);
}
.shake.hover .shake-square .elementor-container{
    animation: tada 0.8s linear 0.15s;
}
.shake .shake-background .elementor-widget-container{
    transition: all 0.3s ease-in-out;
}
.shake.hover .shake-background .elementor-widget-container{
    border-color: var(--hover-background) !important;
}
.shake .shake-background .elementor-divider-separator{
    transition: all 0.3s ease-in-out;
}
.shake.hover .shake-background .elementor-divider-separator{
    border-top-color: var(--hover-background) !important;
}
.shake.inactive .shake-background .elementor-widget-container{
    box-shadow: -80px 80px 80px transparent !important;
}
.shake .shake-line{
    transform-origin: right;
    transition: all 0.3s ease-in-out;
}
.shake.hover .shake-line{
    transform: scaleX(0);
}
.shake .shake-heading .elementor-heading-title{
    transition: all 0.3s ease-in-out;
}
.shake.hover .shake-heading .elementor-heading-title{
    color: var(--hover-text-color) !important;
}
.shake .shake-arrow{
    transform: translateX(-10px);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
.shake.hover .shake-arrow{
    transform: none;
    opacity: 1;
}
.shake .elementor-widget-image .elementor-widget-container{
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}
.shake.hover .elementor-widget-image .elementor-widget-container{
    transition-delay: var(--transition-delay);
}
.shake.inactive .elementor-widget-image .elementor-widget-container{
    transform: none;
    opacity: 0;
    transition-delay: 0s;
}

 

JavaScript code snippet for Shaking Image Hover Effect:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    
$('.shake').hover(function(){
    var $this = $(this)
    $this.removeClass('inactive')
    $this.addClass('hover')
    setTimeout(function(){
        $this.addClass('active')
    },300)
    
}, function(){
    var $this = $(this)
    $this.addClass('inactive')
    $this.removeClass('hover')
    setTimeout(function(){
        $this.removeClass('active')
    },300)
})

$('.elementor-section[link], .elementor-column[link] > .elementor-widget-wrap').on('click', function(){
    
    var $this = $(this).hasClass('elementor-widget-wrap') ? $(this).parent() : $(this)
    window.open($this.attr('link'))
})
    
})
</script>

 

CSS code snippet for Image animation Delay (make different values for different images):

selector{
    --transition-delay: 0.30s;
}

 

CSS code snippet for Making Equal Height Boxes (on tablet):

@media (max-width: 1024px){
selector .elementor-divider-separator{
    border-top-width: 263px !important;
}
}