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.
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.
OK
OK
OK
OK
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!
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.
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…
Have you adjusted the top and left values in the code?
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.
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.
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!
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!