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.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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!
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.
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.
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.
/*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.
I hope you have enjoyed learning How To Move The Divi Blog Title, Text, And Button Over The Image. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally 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 🙂
Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
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 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.
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.
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.
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
Josef Průša
on December 9, 2020 at 6:54 am
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?
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
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 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?
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.
Wouter
on December 18, 2020 at 6:19 am
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:
Nelson Lee Miller (aka The Divi Teacher)
on December 21, 2020 at 6:00 pm
I updated the snippet in the tutorial, it should work now.
Tom
on December 17, 2020 at 7:34 pm
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?
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?
Nelson Lee Miller (aka The Divi Teacher)
on December 21, 2020 at 6:00 pm
How strange, no idea why the module would hide. Try the updated code snippet in the tutorial to fix the original issue.
Tom
on December 22, 2020 at 12:35 am
The new code has fixed it! Thanks for your fast response on this!
Jordan Mason
on December 23, 2020 at 11:24 pm
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.”
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;}
Natashya
on January 2, 2021 at 6:33 pm
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?
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, 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 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, 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
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.
Nelson Lee Miller (aka The Divi Teacher)
on February 22, 2021 at 3:11 pm
Hi Matt, please review the answers I shared to your other comment thread here.
Jorge
on February 17, 2021 at 8:59 pm
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):
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:
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?
Hemant Gaba
on August 13, 2021 at 5:10 pm
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?
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.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally 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 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
In this tutorial, I will show you how to create a backup of your Divi website and explain why they are so helpful and important.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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.
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.