Scale on hover

Source: https://divihow.com/how-to-make-modules-scale-on-hover-in-divi/

Set the modules CSS class to hover-scale and add the following to the custom CSS.

/* START scale on hover */
.hover-scale {
transition: transform 0.2s ease;
}
 
.hover-scale:hover {
transform: scale(1.2);
}
/* END scale on hover */
Code language: CSS (css)

Pop-out box on hover

Add a module and set the CSS class of that module to pop-out-box.
Then add the following to the custom CSS.
You have a white/gray shadow effect, but it looks great if you add a section background color.

.pop-out-box {
 transition: all 600ms cubic-bezier(0.170, 0.690, 0.470, 0.995);
}
.pop-out-box:hover {
 transition: all 600ms cubic-bezier(0.170, 0.690, 0.470, 0.995);
 transform: scale(1.1);
 box-shadow: 0 20px 100px rgba(0,0,0,0.2);
}
Code language: CSS (css)

Pop-effect on hover

Source : http://quiroz.co/divi-module-hover-animations/

Add this to the Custom CSS Class in the module settings: gq-module-hover

Then add this CSS. The first rule is before you hover and the second rule is after you hover. If you want to play around with the shadow depth & shadow colors before and after hovers, just adjust the “box-shadow” elements.

.hws-module-hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    transition: all 0.6s;}
.hws-module-hover:hover {
    transform: scale(1.1, 1.1);
    box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
    z-index: 1;}
Code language: CSS (css)