Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Move The Divi Portfolio Title and Meta Text Over the Image

Nelson Miller Profile Orange
In this tutorial I will show you how to move the title and meta text over top the Divi Portfolio module featured image.

▶️ Please watch the video above to get all the exciting details! 👆

1. Add A Custom CSS Class To The Divi Portfolio Module

This tutorial will apply exactly the same to both the regular Portfolio module and the Filterable Portfolio module. The first step is to add a custom CSS class to the specific Portfolio or Filterable Portfolio module that you want to style. This class will be the link between the module and the jQuery and CSS code, which will be added in the next steps.

Open the Portfolio module or Filterable Portfolio module settings and go to the Advanced tab to the CSS IDs & Classes toggle. Place the class “pa-portfolio-overlay” in the CSS Class input field.

add custom CSS class to the Divi Portfolio module

2. Add The jQuery Snippet

Our goal is to place the text, the title and meta, over the image. The problem is that these two items are separate, and in order to move and position them properly over the image, they first need to be grouped. This jQuery snippet is simply grouping the elements together and forming one new element, the “pa-portfolio-inner” class.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

<script>
jQuery(document).ready(function(){
    function onImage(){
        jQuery(".pa-portfolio-overlay .project").each(function(){
            if(jQuery(this).children().length == 3){
                jQuery(this).children().not(":first-child").wrapAll("<div class = 'pa-portfolio-inner'></div>");
            }
        })
    }
    onImage();
    jQuery(document).ajaxComplete(function(){
        onImage();
    })
})
</script>

3. Add The CSS Snippet

After adding the jQuery, the title and meta text will still remain below the image. So far we have grouped those items, so now we are going to do the actual work of moving them with CSS.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*confine the range of the content that will be moved*/

.pa-portfolio-overlay .project {
	position: relative;
}


/*move the text content to the center of the image*/

.pa-portfolio-overlay .pa-portfolio-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
}

/*create a cuystom overlay*/

.pa-portfolio-overlay .project>a:before {
	content: "";
	position: absolute;
	background-color: #000;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: .3;
	transition: all 0.2s ease-in-out;
}

/*change the opacity of the overlay on hover*/
.pa-portfolio-overlay .project>a:hover:before {
	opacity: 0.5;
}

Move The Text Location/Position

The first part of the code moves the text over the image. This places the text centered in the middle of the image, but you could change this. Notice the CSS says top and left 50%. If you wanted to, you could change these numbers, but you would need to remove the “transform” line. Perhaps you want to replace top with bottom, and set bottom 10% and left 10%. See video for examples of this in action.

Add And Adjust Custom Overlay

The second part of the code is creating a custom overlay. Divi provides the option of using an icon with an image overlay color on hover. But since the text is now situated over the image, the icon would conflict. Plus, we now need the overlay to appear all the time, not just on hover. So we need to essentially turn off the default overlay, and create our own.

Set the color of the icon and the overlay to transparent in the module settings. This will avoid conflicts with our custom overlay.

Divi Portfolio module overlay settings

Notice the opacity setting in the CSS. This is meant to be adjusted. You can also adjust the color value, it is set to black #000 in the snippet. I also provided an overlay hover, and decreased the opacity just a little, but you can remove this or adjust ad needed.

Adjust The Text Color

Don’t forget to set the color of the title text and meta text in the module settings. You will want to make sure the text color and the overlay have a contrast. If the overlay is dard, the text should be light.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

30 Comments

Comments By Others

  1. Dominic Conrad

    Im using a filterable portfolio grid where I’ve set the width to 100%. With the CSS snippet provided, the overlays were shifted 50% to the right. So I’ve got round this by changing absolute to relative.

    /*create a custom overlay*/

    .cc-portfolio-overlay .project>a:before {
    content: “”;
    position: relative;
    background-color: #000;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .3;
    transition: all 0.2s ease-in-out;
    }

    Should that be OK?

    Reply
    • Hemant Gaba

      Hi Dominic!

      Changing the position to a relative will remove the effects. Can you please share the URL of the page so that I can provide the desired code?

      Reply
  2. lois

    Hi,
    Maybe it is because DIVI seems to have taken the “overlay” out of the settings, but I cannot make this work. I did get it to look better, but the text isn’t over the thumbnail. I have it set to landscape rather than grid, but tried both ways and it isn’t working as sweetly as your tutorial on YouTube.
    I appreciate all that you do!
    It’s okay for now, but I would love to know what I am doing wrong. I have tried all kinds of tweaks. Here is the link: https://nicholssurfshop.com/nichols-surf-shop-videos/

    Again, gratitude for all that you do!

    Reply
    • Hemant Gaba

      Hi Lois!

      I’m not able to see the customization being applied to the portfolio module. Can you please follow the above steps and let me know?

      Reply
  3. Jason L

    Hi there and thanks for another great tutorial. I have followed your example code exactly and am having difficulty. It is causing Divi to not apply the CSS unless the Category Element is enabled. I don’t want to show Categories, so as soon as I disable it, Divi crashes. I have spoken with Divi Support and they can replicate the same problem on their test site. They suggest it might be caused by your JavaScript code? I am using the latest Divi build 4.22.2. If you could let me know of any known problems with your code and this version of Divi and a solution, I would be very grateful.

    Reply
    • Hemant Gaba

      Hi Jason!

      Thank you for reporting the issue. We will look into the issue and update a solution soon!

      Reply
  4. Joyce

    Hey, thank you for the great tutorial! Is it possible to show other text on the image? I would like to use dynamic content to show the brand of each subject.

    Reply
      • Joyce

        Hi,
        In the meantime i figured out a way to do this, but thank you for your reply!

  5. Ron R

    I have this code working along with the code 2 change to 2 column layout. But lastly, I am trying to specify a shorter aspect image stack. When I enter like 60% height I get the aspect I want but then the portfolio items have horizontal gaps between each row. Please help. Here is the code:

    /*confine the range of the content that will be moved*/

    .pa-portfolio-overlay .project {
    position: relative;
    }

    /*move the text content to the center of the image*/

    .pa-portfolio-overlay .pa-portfolio-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    }

    /*create a custom overlay*/
    .pa-portfolio-overlay .project>a:before {
    content: “”;
    position: absolute;
    background-color: #000;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 1;
    opacity: .2;
    transition: all 0.2s ease-in-out;
    margin-right: 0!important;
    margin-bottom: 0!important;
    }

    /*change the opacity of the overlay on hover*/
    .pa-portfolio-overlay .project>a:hover:before {
    background-color: #fff;
    opacity: 0.35;
    margin-right: 0!important;
    margin-bottom: 0!important;
    }

    /*porfolio image aspect ratio square 1:1*/
    .pa-portfolio-overlay2 .et_portfolio_image {
    padding-top: 100%;
    display: block;
    }
    .pa-portfolio-overlay2 .et_portfolio_image img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    }

    @media only screen and (min-width: 480px) {
    .et_pb_portfolio_item {
    width: 50%!important;
    margin-right: 0!important;
    margin-bottom: 0!important;
    }
    .et_pb_portfolio_item:nth-child(2n) {
    margin-right: 0!important;
    }
    }

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Unfortunately we wouldn’t be able to provide customization services for this kind of scenario when you are combining various tutorials and customizing things. I would suggest simplifying and using the new aspect-ration CSS property, maybe that will give better results.

      Reply
  6. Lorena Rodriguez

    This is pure gold! Is there a way to eliminate the gaps between rows and columns? I can’t find a tutorial on that.

    Keep it up!

    Reply
  7. David

    Thanks. It doesn’t work on my website. I got the overlay effect all offset.
    It’s like there is a margin on the overlay effect. The effect has shifted to the right and I can’t get it on top of my content…

    Reply
    • Piotr

      If you set the Show Categories option to No then you need to change the condition in script:

      if(jQuery(this).children().length == 3)
      to
      if(jQuery(this).children().length == 2)

      Because the value will then be 2, not 3.

      Reply
  8. Betty

    Hi! This worked like a charm. What if I wanted the title and meta to be visible only on hover?

    Thanks!

    Reply
  9. Chanel Collis

    Hi Nelson, thanks for this great tutorial. Another thing I am trying to do is show the project excerpt on the main filterable portfolio page, under each featured image. Any ideas on how to do that?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart