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.
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!
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.
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 Jordan,
That is in the Divi Blog module borders settings 🙂