Last week we showed you How to Add a Filtered Portfolio Triggered by any Divi Module and today we will take that a step further by showing you How to Show the Title on Hover with the Divi Portfolio Module. This neat little trick is a great way to add some additional interactivity to your Portfolio while keeping the design nice and clean.

We will be using some CSS to make this happen, so get your coder hats out and let’s dive right into it!

Preview:

AFTER

Video Tutorial

Where to Add the CSS Code

Whether you followed along with last week’s tutorial, or you are just joining us, adding the CSS is pretty easy. You have the option to add it in either one of two places and which one you choose would pretty much come down to how often you’ll be using this code. We want to make sure that we are not bloating our site with a bunch of code that might only be used once or twice.

Option 1) Divi Theme Options Custom CSS

This is the best place to add the CSS if you will be reusing the CSS class we create on multiple pages.

Head over to Divi > Theme Options > Scroll down to Custom CSS

Paste the CSS code in the box

Option 2) Divi Code Module

This is the best place to add the CSS if you only need to show the title on a Divi Portfolio Module on one page.

Edit the Page that has your Divi Portfolio Module

Add a Divi Code Module

Paste the CSS code in the box between opening and closing <style> tags

The CSS to Show the Title on Hover with the Divi Portfolio Module

Just copy and paste the code below into either of the spots outlined above.

Add the CSS Class to the Divi Portfolio Module

The last step is now to just add the CSS Class we created, to Show the Title on Hover with the Divi Portfolio Modules.

Edit the Divi Portfolio Module > Advanced Tab > CSS Class > de-portfolio-title

Now when you save and reload this page you will have a gorgeous portfolio that shows the title of the portfolio item on hover.

A wild mulleted title appears out of nowhere…

Conclusion

We hope this look at How to Show the Title on Hover with the Divi Portfolio Module was helpful to you! With just a little bit of code, we transformed the way our stock Divi Portfolio Module works and it looks so much better!

Definitely drop a comment below to let us know what you think and we always welcome suggestions on how to make this content work better for you.