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)