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!
Table of Contents
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…
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.