Text Over Divi Blog Featured Image
If you like to style and customize the Divi blog module, be sure to check out the many tutorials we have been doing in our Divi Blog tutorials. This tutorial builds on some of the others. It also was a request, and I’ve been planning this for a long time. I think it’s great and really looks nice! So let’s get to it. This tutorial will do some tricks and move the Divi Blog module text over top of the featured image.
▶️ Please watch the video above to get all the exciting details! 👆
#1. Add The Code Snippets
Add A Custom CSS Class To The Module
Start by adding a custom CSS class “pa-blog” to the Divi Blog module settings>Advanced tab>Custom CSS & IDs toggle>CSS Class field.
Add The jQuery
The first thing you need to do is add the following snippet of jQuery code to your website.
What Is This Doing?
This is doing a very special trick. By default, the blog module is broken into parts, the title, the meta, and the content. In order for us to move all thee parts as a unit, we first need to combine them into one element. Pretty cool, huh!
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>
(function($) {
$(document).ready(function() {
$(".pa-blog .et_pb_post").each(function() {
$(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="pa-blog-text"></div>');
});
//Do the same for ajax
$(document).bind('ready ajaxComplete', function() {
$(".pa-blog .et_pb_post").each(function() {
$(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="pa-blog-text"></div>');
});
});
});
})(jQuery);
</script>Add The CSS
Once the previous snippet is added and saved, we can move on to the CSS.
What Is This Doing?
This code is moving the combined element that we wrapped together with the jQuery and placing it up over the featured image. It is centering this new element vertically and horizontally over the image.
We also needed to include some CSS to clean things up. For example, we needed to adjust the margin and padding on the featured image.
Another thing we are doing is adding an overlay to the image so that the text stands out. We can’t use the overlay in the module settings for this because it would put the text behind it.
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.
/*move wrapped title, meta, and text up over the image*/
.pa-blog-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 30px;
z-index: 1;
}
/*keep the moved items positioned with their parent items*/
.et_pb_blog_grid article {
position: relative;
}
/*remove spacing around entire blog post*/
.et_pb_blog_grid .et_pb_post {
padding: 0px;
}
/*remove negative margins on blog featured image*/
.et_pb_image_container {
margin: 0;
}
/*remove the margin below the featured image frame*/
.et_pb_post .entry-featured-image-url {
margin: 0;
}
.et_pb_blog_grid .entry-featured-image-url::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#2. Adjust Divi Settings
Remove The Border
By default, Divi adds this annoying little 1px gray border. Just remove that, you can barely see it now but it is still noticeable.
Title Text
Because we added an overlay to the image (to make it easier to read the text), now we need to do part two of that and make the text a light color. In my example, I made the H2 Title Text white.
Meta Text
Again, if you are using any meta text like author name, categories, date, etc. then you would want this to be a light color as well.
Body Text
I don’t think there would be enough room for this in the grid mode, but if you have a large enough space, you could keep the Excerpt turned on. If so, the same idea applies and this would need to be a light color.
Button (Read More Text)
If you are using the read more button, then you probably want to make it look better. We have a great tutorial on How To Style And Customize The Divi Blog Read More Button, which shows you how to style the link text as a button, add an icon, and change the button text.
This is exactly what I want to do with my wesbite. However, When I changed the layout from Grid to Full Width, this code: .et_pb_blog_grid .entry-featured-image-url::before {
content: ”;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
Is not working. I hope you can help bro. I appreciate so much what you do.
Hi Mark,
Yes that’s because you are targeting the .et_pb_blog_grid, so just remove the _grid part or remove the whole thing and it will work.
How can this be applied to a blurb element. I’m a bit confused when inspecting it, and I don’t know which class is which.
Hi Mont,
This tutorial and CSS is specifically for the blog. I would not try to do this with the blurb, but use image and text modules in a column instead.
Hello, just for info I miss info that you need to add class .pa-blog on blog module.
Hi David,
Actually no, you don’t. That class is the class used to wrap the title, meta, and button together, and should not be added to the blog module.
Thank you for this tutorial! This is so helpful.
I wanted only the title and meta pulled up over the image and it worked great! When I re-size the screen however, the meta starts to get cut off on the bottom. Is there any way to remedy this? Thanks!
Hi Mercy,
I guess it’s kind of a physics thing. The title longer and there’s nowhere for the text to go. The best thing I can think of is to reduce the text size.
It wil be quite useful to me! Love it! Thank you!
I am glad, I hope you can put this to good use!
Not working for me…
Edit: working now, worked when I added .pa-blog class to the blog module
Great, glad to hear you got it working!
Thanks, updated the post 🙂
I get a bunch of errors with this code
Okay, but you didn’t say where you are putting it and the errors are. My code is fine, so let me know.
I think I was placing it in the wrong place… because I just tried following this again and it worked… I don’t even remember now I ended up finding a different solution at the time
HI Nelson,
looks like WordPress 5.6 update has just managed to break your code. Has something to do with dropping some old JQuery support.
Any idea how to fix that?
Josef
Hi Josef,
It still works for me. Could you share a link to your site? Is it up to date?
I updated the snippet in the tutorial, it should work now.
Hi there not sure if im missing something but i was working on local and worked perfect! then migrating to live url and now div “pa-blog-text” isn’t added to wrap the title, meta and content? am i missing something
What do you mean “isn’t added”? Couldn’t you just add the code above to the live site?
I’ve just used this on a website and it worked perfectly until WordPress 5.6 was released and JQuery was updated to the latest version. Could you advise what changes we need to make to the script? It’s broken in 5.6 now. Sorry to bother, I’m not that good with scripts and this was perfect for what I was doing. Thanks!
Hi Sarah,
It still works for me, could you show me a link?
Hi, the url is here I managed to get it working again by installing the jquerymigrate helper, but it’s a bit of an iffy solution for now. Thanks 🙂
I updated the snippet in the tutorial, it should work now.
Thank you, it works perfectly! 🙂
Hi there! Hope you are well. I’ve been using this on the blog post module for the last two months without trouble. Suddenly everything jumped out of place again. The only thing I can think of that might have interfered with it is the recent WP update. Am wondering if anyone else has issues and if you got any remedy?
Here is the link to the website I’m referring to https://gobeyond.se/starta-har
Have also inserted a screenshot.
Worth mentioning, when I’m in the visual editor, the text is placed on top of the image as it should be. Just not showing in the public version.
Would appreciate any help.
Kind regards,
Parham
Hi Parham,
It works for me, and it looks fine in your link, so I’m not sure what you mean.
Hi again! Yes, I have sorted the issue now. It seems that the new Wp Update removes a jquery library. Which was what interfered with the script. I got advised to Install the “Enable jquery migrate helper” plugin and then choose the legacy version of jQuery. That sorted the issue.
Hello, this indeed sorted the issue. But i would rather not use the plugin. Is it possible to adjust the script to make it work? Thank you
It is hard for me to know since I can’t replicate it, but try this and reply back:
I updated the snippet in the tutorial, it should work now.
Hi Nelson,
I’ve had the same issue as others with the recent WP 5.6 update breaking your code. Installing the Enable jQuery Migrate Helper plugin works as a temporary fix – do you have plans to update the code?
Attached a before and after screen grab.
Tom
Hi Tom,
I’m still not able to replicate it, would love to find the common denominator. You can try this and let me know:
Thanks for getting back to me, no luck with this – this code hid the blog all-together!
It was all working fine before the WordPress 5.6 update – all plugins and DIVI has been updated too?
How strange, no idea why the module would hide. Try the updated code snippet in the tutorial to fix the original issue.
The new code has fixed it! Thanks for your fast response on this!
That did not work for me. In addition, you say in your instructions: “By default, Divi adds this annoying little 1px gray border. Just remove that, you can barely see it now but it is still noticeable.”
How exactly do you do that? You never said.
Hi Jordan,
That is in the Divi Blog module borders settings 🙂
K. Got it. Is it possible to create this overlay as a hover effect? So essentially it starts out as a picture, and then when mouse over – it goes to like a move-up class transition effect with the title and screen overlay?
That is a good idea. You could certainly do this, yes. You could try something like .pa-blog-text {opacity: 0;} and .et_pb_post:hover .pa-blog-text {opacity: 1;}
Hi there – this was a terrific snippet; but I’m having issues because it only works on the initial page-load, and stops working as soon as you click to go to the next page. Any suggestions?
Hi Natashya,
We have updated the snippet to work when pagination is used.
Hi Nelson, I have the same problem now. it only works on the initial page-load and stops working as soon as you click to go to the next page or go back. Can you help, please?
Hi Tatiana!
We updated the code for the pagination. If the issue persists, then you can try clearing the plugin cache. If it doesn’t help, could you please share the URL for me to investigate further on this?
Excellent guide, I congratulate you on your Blog, they are knowledge pills, thanks for sharing.
Thank you Luis, I’m glad you are enjoying our content!
How would you change the post title font size in a Blog Module? I only. see header. fonts, H1,H2,H3, etc… and cant find the option for mobile.
Thank you .
Hi there,
That is a standard Divi builder setting. Just open the responsive icon and adjust per device.
Hi, love your tutorials… just wondering if you can have the title, metadata, and overlay color show up only when you hover over the image? Example here https://thedesignspacedemo.co/folio/blog-minimalist/
Cheers
Rebecca
Hi Rebecca,
Yes for sure. Just add the :hover selector to your CSS. You could try something like making the text opacity: 0; and then on hover opacity: 1;
Hi, when i post the first bit of code into the integrations within divi options, it comes up with an error next to the final </script> saying ‘tag must be paired, no start tag [</script>]. But there is the <script> at the beginning. Can you please help?
Hi Sasha,
I’m not sure, I never encountered that issue before. Maybe you have other code snippets that are not formatted right?
Hi there, I added the js and the CSS and then the class to the blogs on this page but they change the layout of the grid, they are no longer in a clean little block.
Hi Matt,
Can you share more context about this?
Sure, I added a blog block at the top of this page:
https://revivalofrevenue.com/tror-blog-forge/
but when I added the CSS and JS and the class as stated on this page:
https://www.peeayecreative.com/how-to-move-the-divi-blog-title-text-and-button-over-the-image/
it made the blocks no longer in the properly aligned way they were prior to adding the code… all jenk y as you can see on the top of the page
That page requires a password 🙂
pw: trorblog
Hi Matt, so I see you have three blog modules, one in each of the three columns. I’m not sure what you are asking, I thought you meant it changed the column layout. What I do see is a physics problem, where there is too much text to fit inside the images. Is there something else I’m missing?
They lined up like smooth blocks, in three columns, one large block to the left and then two smaller blocks that i put blog modules in as well. so you would have 5 total post , one big one on the left and 4 to the right, lined up all smooth…. then I add your code and you see its distored, the blocks are all out of whack
This is what it looks like before the code is installed
This is what the page looks like before adding in the code
THis is what it looks like after the code is installed
I am having trouble with the your code. When I install the CSS , JS, and the class code the action seems to work to bring the text within the image. I have provided a before and after to what happens when I applied the code mentions on this blog post. Am I doing something wrong?
Hi Matt,
You have to understand that the way you are trying to use the Divi Blog module is not the same as in the tutorial. Also it looks like you may have tried to share screenshots?
Please explain what I did wrong then. I installed the JS and CSS and applied the class, what did I miss and I will try to share the screen shots again.
Hi Matt, please review the answers I shared to your other comment thread here.
Hi Nelson! Thank u very much for this amazing tutorial. I have a small problem, the separation of the bottom edge is not the same for web as tablet and mobile, how can I do so that each one has a different separation, also, when the title has three lines, it is perfect, but if it has two lines, it starts to rise and it doesn’t look good. Thanks for the help.
Hi Jorge,
I’m not sure what you mean by the separation. But in general, he physics of having different length text are a problem that you could maybe solve with adjusting the font size.
Thank you for this post–it’s very helpful. I’ve tried everything I can think of to make the overlay shadow to get lighter (just the shadow, not the text) when you hover over the post image, but it won’t work. I’ve tried both of these but don’t really know what I’m doing (just copying from other parts of the code):
.et_pb_blog_grid .entry-featured-image-url:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.et_pb_blog_grid .entry-featured-image-url:hover img {
-webkit-filter: opacity(30%);
/* Safari */
filter: opacity(30%);
margin-top: -1px;
}
Any ideas?
Hi Matt,
It sounds like you are asking how to change the opacity of the overlay on hover. The code you want to be working with is the last snippet in the post:
.et_pb_blog_grid .entry-featured-image-url::before {
content: ”;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
So you could simply add :hover into that like .et_pb_blog_grid .entry-featured-image-url:hover::before
Thanks. I got it to work sort of. It gets lighter on hover when you hover around the edges of the image but not when you hover over the text in the middle of the module. Any quick fix to that?
Hi Matt,
There is no snippet mentioned in the CSS that triggers any styles on hover. So could you please share the URL of the page so that I can look from where that hover is coming from and how can fix the hover text issue?
https://liftyourneighbor.org/ It’s toward the bottom under the title “Perspectives”
The issue is happening because you have given the before pseudo-class to the anchor tag and the z-index of that anchor tag and before pseudo-element is not defined but the container containing the text has a z-index of 1 so that is why it is being on the higher priority. Now increasing the z-index of the anchor tag or decreasing the z-index of the text container is not a solution here because the black overlay will come on the text if we do that.
The best solution here for you is to remove the before and the before hover code that you are using and use the code given below instead:
.pa-blog article:hover::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
transition: all .5s ease;
}
.pa-blog article:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.55);
z-index: 1;
}
This will add the before pseudo-class to the whole article and that will remove the issue.
Let me know if that helps. 🙂
Yes, it worked great, thanks so much!
Great! I am glad to hear that.
Let me know if you need any further assistance. 🙂
Worked brillantly! Thank you so much.
Hi, Nelson, thanks so much for such an useful code. I’m trying to mix this trick with your other one to make the image 1:1, but I don’t get it… any clue?
Hi Pamcho, can you clarify what you are trying and what is happening? Also a link is necessary.
Hi Nelson!
Thank you very much for this tutorial, it has been very helpful!
Works perfectly with Divi integration but not including in child theme js folder. Do you know what it could be?
Thanks again!
Hey Miguel,
First, please make sure that you are doing everything right in terms of placing the code. If everything is right then there must be a caching issue so please try doing the hard refresh or using a different browser and see if that helps.
Let me know how it goes.
Hi Nelson!
Thanks for your awesome tutorial!
I try to developer this tutorial on my temporary url, but text doesn’t change and remain under futured image.
I add java in head in integration divi, and the css in css editor. But it doesn’t work! 🙁
Any suggest?
Hey Davide,
Could you please share the URL for me to investigate further on this?
Hi, Looks awesome on the category posts page I assigned it to, thank you so much! I only want this style to show on one category page’s module using the css class, with remaining category pages to be styled normally. But margins under & dark gradients over featured images seem to have changed globally now even though the CSS class isn’t assigned to any other blog grids. What did I do wrong?
Hey Heather,
The URL you provided is under construction right now so I was not able to check it but I would suggest you provide a different custom class to the blog module and place that custom class at the start of every CSS selector present in the code and then you will not face this issue.
Hi, it is just I needed! My blog page now looks awesome. Thank you so much.
Is it possible to add into “package” with Title and metadata custom field?
I have custom field with date and time.
Unfortunately you cannot add custom fields to the Divi Blog module.
Hi there! When adding the Custom CSS code to my Blog module I get 2 errors: Expected RBRACE and Unexpected token }. What could be the problem? Here ist the site where I am testing it: https://martaullmann.com/238876-2/
Thank you very much for your help!
Hi Marta,
It sounds like you are adding the CSS to the wrong location. You cannot add it to the module, please add it to Theme Options as directed.
Hi thank you so much for all your amazing tutorials.
Do You have any way to make this css and jquery work for a custom post type?
i am editing the archive page with the divi theme builder.
(the post type is called e-books)
any help is really appreciated
thanks in advance!
The tutorial is about the Blog module, so if you are using that then it would not matter what post type is used.
It seems like the black background doenst work anymore?
?
This is brilliant! One small issue I have is that the link only works on the title, if you click anywhere on the image the link doesn’t seem to work. http://dominichyman.co.uk/projects-film-tv/
Hey Paul,
Could you please use this code and let me know how it goes?
https://www.codepile.net/pile/B5ya4k54
Hi Nelson! Huge fan of your tutorials! I saw a comment above that shares the same issue I am having. The black overlay is not working. I tried to change the color to a different color and higher intensity but changing does not show the black overlay or the color that I tried to change it to. Any idea on how to fix this?
Example- .et_pb_blog_grid .entry-featured-image-url::before {
content: ”;
position: absolute;
width: 100%;
height: 100%;
background-color:rgba(236, 188, 165, 0.5);
}
Thank you in advance!
Hmm, the only thing I can think of is if you are not using the grid layout?
Hi
How are you?
I am using post carousel. I want my post title to below on the image slider. I need help in that. Hopefully to hear positive from you soon
.
Waiting for your response on it
Thank You
Your question is not related to this tutorial. For this kind of question you could ask in a Divi Facebook group.
I’ve used this styling on a couple of occasions now, with perfect results. But when I try now on another site I can’t make it work. I follow your steps. Both WP and Divi are updated to the most recent.
I am not sure about that, maybe it is some caching issue.
This is great! Works a treat when I have posts in the multiples of 2, though on some of the tag pages though the columns break when the posts are odd numbered, floating the text box off to the other side of the page.
Any idea how I can fix? Thanks for the great info! 🙂
Not to worry! I found it on one of your other posts – thank you!
HI Nelson, thanks so much – works a treat. I just have one issue – as my Blog Posts module is 90% page width, the thumbnails are looking low res as they are showing intrinsic 400px x 250px and need to be over 500px wide for my full page width layout. How can I fix that? https://waratahbuilding.com.au/stories/
Hi Sarah!
Please follow the guide and try to use uncropped image: https://www.peeayecreative.com/how-to-stop-divi-image-crop/
If the issue persists, please try disabling the responsive image option in Theme options and regenerate the thumbnails (after that enable the option).
Let me know how it goes!
Hello,
I have followed your tutorials, and they are amazing. Time saver ! Thank you so much for that incredible work.
I mixed tree of your tutorials, to move the texte above the image, to create a button for the ‘read more’ and last to change the aspect ratio of the images.
When I did this last modification (the aspect ratio) the overlay over the images stopped working.
This bit of code :
.entry-featured-image-url::before {
content: ”;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4)!important; I even added the !important but this does not change anything.
}
Do you have a fix, I have been trying and inspecting the code with no luck.
thank you
Hi Aneal!
The value of the property is not correct in your code. Please add the following code instead:
.entry-featured-image-url::before {
content: ” ” ;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4)!important;
}
Let me know if it helps!
Hello Nelson,
Thanks a lot of this super useful tutorial. I followed it a while ago and it was working perfectly, but I just noticed that on mobile it is not bringing the metadata over the image. The blog module is at the bottom of my website and when on mobile, I can’t see the titles and they leave a huge gap in between images. Any help would be greatly appreciated!
Hi Tatiana!
Could you please share the URL for me to investigate further on this?
Great guide! Is there any way to force the tile to be square? I’ve been trying to combine my own solution for square featured images with your code but having some trouble getting it to display correctly.
Jamie!
Please note that to make the tile square, we need to set the height and width to be equal. However, post sizes needed to be checked to provide a code for it. Can you share the URL of the page to check further?
This works so well, I’ve been trying to reorganise the order of data using your other tutorial but it’s not making the changes. I want the meta to come under the excerpt. Is this possible?
Hi Amy,
I have not tried it with this one, but you can refer to this tutorial for changing the order of items: https://www.peeayecreative.com/how-to-reorder-the-divi-blog-image-title-meta-excerpt-and-button/