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.


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

Let’s get started! We are going to create one folder, one new file and add a little to our style.css and functions.php files. The folder is going to be called custom-modules. In this folder will go a file called cfpm.php. You can really name this anything but you will have to call it later in functions.php so keep it simple.

Next, we’re going to add code to functions.php in order to call the file and override the parent theme’s module. If you already have an opening php tag, make sure not to include the one below. This is where we will be calling our previous file so you might need to change the cfpm if you named yours something else.

Lastly, we are going to add our styles. This will go into style.css.

That’s it! I’ve kept everything with the same classes so you can see how the original code was incorporated into the Divi template. Don’t forget to add your vendor prefixes!

You can download all of the files on github.

You can see it in action on our homepage!