Tutorial

Elementor Multi Hover Effects

Uses Plugins

Elementor PRO

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.

1

Add a main container

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

Image Widget

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

Add an Icon Widget

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

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;
    
}