Adding hover effects to Divi fullwidth portfolio grid

by | Jan 7, 2016 | Divi, tutorial | 10 comments

Not updated for CUSTOM MODULES yet

Hi guys, thanks for stopping by. I haven’t updated this post yet to accommodate front-end accessibility. I’m working on it and hope ti have it updated soon.

Sincerely,
Rebekah

I love Divi. LOVE. But, sometimes it can be somewhat humdrum out of the box. I also love CSS animation and many of the amazing things found on Codrops. Applying Codrops awesomeness can be somewhat difficult because of the Divi structure. I’m going to show you how to apply a pretty cool hover effect from Codrops to the Divi Fullwidth Portfolio module.

Divi’s Fullwidth Portfolio Module pulls its data from the Projects custom post type. This makes the output somewhat hard to style because of the Divi Builder. To add these effects, we’re going to have to create a custom module and a few files. Hopefully, you are already using a child theme. This is customization 101; always use a child theme. If you don’t have one yet, you can download one from my github repo.

tymapnus/codrops hover effects

example from Codrops

I haven’t had time to update this post but someone else has!! 

To see the code you should enter into the functions file, check here!

To see the FullwidthPortfolio.php file, check here. This file needs to go in a folder called modules. And the folder, of course, is inside your child theme. 

This still isn’t frontend builder compatible but at least now it works!