Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

In this Divi tutorial we are going to show you how to create a cool hover effect on your Divi Modules with a little custom CSS.

This hover effect will simply enlarge the module and give it a box shadow when you mouse over it. We use this on the Testimonial Module and Blurb Module but using this same method, you will be able to do this in just about any other module as well.

You can check out the demo page here.

Lets Get Started

1. Open up your testimonial module or your blurb module and assign the following Custom CSS Class in the module settings: gq-module-hover

Divi Module Hover Effect



The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)


/*-------------[TESTIMONIAL HOVER]----------------*/
/*--------------[BY GENO QUIROZ]------------------*/

/* testimonials */
	.gq-module-hover {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
		-webkit-transition: all 0.6s;
		transition: all 0.6s;}
	.gq-module-hover:hover {
    	-webkit-transform: scale(1.1, 1.1);
    	transform: scale(1.1, 1.1);
    	box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
		z-index: 1;}



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.

And that’s it! Have fun!

Well that’s all for now. I hope you find this article useful.

The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.



You have Successfully Subscribed!

Pin It on Pinterest