Moving The Portfolio Title Text
The Divi Portfolio/Filterable Portfolio modules have some limitations. The title text and meta (category) text is below the image. But what if you want to change that and place it onto the image? There are no settings for that in the modules, so in this tutorial, you will learn how you can place the title and meta text over the image in the Divi Portfolio module. The steps to take are really straightforward and require the use of a little jQuery and CSS to accomplish the results.
▶️ 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.
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.
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.
Hi – I’m doing something wrong, I’m sure. I have a dark overlay on the Portfolio images now but the title remains under the image, not on top of it.
This is a DRAFT page that’s a concept I’m working on, but here is the URL – https://harmonbuilders.com/home-draft/. Funny that the two things I needed today were both found on your site. Very helpful. Thank you!
Hi Kristin!
I can see that the title is over the image in the Portfolio section on the homepage. Please clear the browser cache and check again.
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?
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?
I’m glad the issue is resolved.
I managed to get over this eventually but you can check how I used your tut at https://amcreate.co.uk/portfolio/
Thanks – I think I got over this issue eventually – but the site is now live at https://amcreate.co.uk/portfolio/
That Chrome extension ‘User CSS’ – cant find it in the Chrome webstore? Has it been updated to this? https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld?hl=en-GB&utm_source=ext_sidebar
Hi Dominic,
Here is the one I have been using: https://chromewebstore.google.com/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb
Yep – got that now thanks. Very handy.
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!
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?
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.
Hi Jason!
Thank you for reporting the issue. We will look into the issue and update a solution soon!
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.
Hi Joyce,
The Divi Portfolio module does not have any other text, so I am not quite sure what you mean.
Hi,
In the meantime i figured out a way to do this, but thank you for your reply!
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;
}
}
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.
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!
For that you need to reduce the gutter on the row to 1.
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…
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.
Have you adjusted the top and left values in the code?
Hi! This worked like a charm. What if I wanted the title and meta to be visible only on hover?
Thanks!
For that simply change the opacity from transparent to color on hover using the Divi design settings for the text.
Hi, Nelson. I was looking for the same effect to change the text opacity on hover. However, using the divi module settings means you have to hover exactly over the title or meta data to create the hover effect. What I’m looking for is when you hover over any part of the image the text becomes visible. Appreciate the tutorial! Super helpful.
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?
We have a tutorial coming soon on this, stay tuned to our blog!
OK
OK
OK
OK