Tutorial

Elementor Multi Hover Effects

Video

Description

This video shows a simple way to animate multiple Elementor Widgets or elements with a single hover event. Uses custom CSS Parent-Child structure, and basic CSS transitions.

Steps

Add a main container
Image Widget
Add an Icon Widget
Custom CSS

Add a main container

Add whatever sections/columns or containers you want to the editor
Choose a Column or Container as the "Hover Container" and add the class "aminate-on-hover" to it

Image Widget

Add either a single column inner section or a Container
Set the Height to a fixed height with custom CSS
Add an Image Widget, and set the class to "animate-zoom"

Add an Icon Widget

Add an Icon Widget
Set the Position etc to place it where you want.
Add the class "animate-spin"

Custom CSS

Copy and Paste the CSS below into Site Settings -> Custom CSS.

Code (click to copy)

Custom CSS for Site Settings (css)

/********************
 Hover Animations
 *******************/
 .aminate-on-hover {
     box-shadow: 0 0 15px #00000022;
     transform: translateX(0) translateY(0);
     transition: all 1s;
 }
 
 .aminate-on-hover:hover{
     box-shadow: 15px 15px 15px #00000055;
     transform: translateX(-10px) translateY(-10px);
     transition: all 1s;
 }
 
 .aminate-on-hover .animate-spin .elementor-icon{
     transform: rotate(0);
     transition: all .5s;
 }
.aminate-on-hover:hover .animate-spin  .elementor-icon{
    transform: rotate(360deg);
    transition: all 2s;
}



.aminate-on-hover .animate-zoom img{
    transform: scale(1);
    transition: all 0.5s;
}
.aminate-on-hover:hover .animate-zoom img{
    transform: scale(1.2);
    transition: all 3s;
    
}