How To Move The Divi Portfolio Title and Meta Text Over the Image Tutorial by Pee Aye Creative

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

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

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.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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.

Last updated Sep 26, 2022 @ 11:30 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart