When you first think of adding text or a button over an image, you may think this would be easy – just use the Call-To-Action module, right? Wrong! There are at least two problems with that method. One, the image would need to be a background image, which means it will get cropped. Secondly, background images are decorative and do not contribute to SEO. So unfortunately that option is out.
Our Past Okay Solution
If you are a long time follower or good Googler you may recall I created a tutorial in the past about this same topic. However, in that tutorial the approach was okay but not great. We used a pseudo class to add text over the image and then style it to look like a button. It worked, but had problems any time the text got too long and it was just an awkward way to do it.
A Great New Solution
So here we are again and this time we will deliver the best solution possible using actual Divi Button modules that you can style in the builder and actual Text modules and even get this – the Call-To-Action module (for text AND a button). So let’s get started with this tutorial and show you how to add text or a button or both centered over a Divi Image module!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
We have three different things we are showing you today.
Text over an image
Button over an image
Text AND a button over an image
Each of these have the same steps, so just choose whether you want a button, text, or both and proceed with that one. The steps are pretty simple. Add the modules to your layout, add a custom CSS class to that column, adjust the design settings, and add the CSS snippet.Â
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.
Add A Divi Button Module Centered Over An Image Module
1. Add An Image Module And A Button Module In The Same Column
Go ahead and add an Image module to a column. Then below it also add a Button module. Here is what you should have so far:
2. Design The Modules
Of course you should take some time to adjust the Divi Builder design settings for both modules. Remember, this is the great thing about this method. You can use all the normal design settings for both modules!
3. Add A CSS Class To The Column
Now go to the Row Settings>Column Settings>Advanced tab>CSS ID & Classes toggle and add “pa-button-over-image” to the CSS Class input field. This class is used in the CSS snippet below to target this particular column. So you can add this custom class to any column that you want to have a button over an image.
4. Add The CSS Snippet To Your Website
Now it’s time to add the CSS snippet that does all the work for us.
/*move and position the Button module over the center of the Image module*/
.pa-button-over-image > .et_pb_button_module_wrapper {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
z-index: 10;
transition: opacity 0.3s ease-in-out;
/*opacity: 0; remove comment for hover reveal effect*/
}
/*add an optional overlay over the image*/
.pa-button-over-image > .et_pb_image .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 9;
transition: opacity 0.3s ease-in-out;
opacity: 0.3; /*make this 0 for hover reveal effect*/
}
/*show button on image hover*/
.pa-button-over-image:hover > .et_pb_button_module_wrapper {
/*opacity: 1; remove comment for hover reveal effect*/
}
/*show overlay on image hover*/
.pa-button-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
/*opacity: 0.3; remove comment for hover reveal effect*/
}
5. Add Optional Hover Reveal Effect
In the snippet above I have added some extra code that will allow you to show the button when you hover over the image. You just need to make a few easy edits to make that happen. Everything is clearly noted in the code with instructions. If you need any help please watch the video to see what I mean.
6. View Results And Make Any Adjustments
Here is the result that I created in the video:
You may need to adjust the top: 44%; value. This will depend on some factors like how tall your button and image are and this is just a minor adjustment you may need to make on yours.
Add A Divi Text Module Centered Over An Image Module
1. Add An Image Module And A Text Module In The Same Column
Go ahead and add an Image module to a column. Then below it also add a Text module. Here is what you should have so far:
2. Design The Modules
Of course you should take some time to adjust the Divi Builder design settings for both modules. Remember, this is the great thing about this method. You can use all the normal design settings for both modules!
3. Add A CSS Class To The Column
Now go to the Row Settings>Column Settings>Advanced tab>CSS ID & Classes toggle and add “pa-text-over-image” to the CSS Class input field. This class is used in the CSS snippet below to target this particular column. So you can add this custom class to any column that you want to have a text over an image.
4. Add The CSS Snippet To Your Website
Now it’s time to add the CSS snippet that does all the work for us.
/*move and position the Text module over the center of the Image module*/
.pa-text-over-image > .et_pb_text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
z-index: 10;
width: 100%;
transition: opacity 0.3s ease-in-out;
/*opacity: 0; remove comment for hover reveal effect*/
}
/*add an optional overlay over the image*/
.pa-text-over-image > .et_pb_image .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9;
transition: opacity 0.3s ease-in-out;
opacity: 0.3; /*make this 0 for hover reveal effect*/
}
/*show overlay on image hover*/
.pa-text-over-image:hover > .et_pb_text {
/*opacity: 1; remove comment for hover reveal effect*/
}
/*show text on image hover*/
.pa-text-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
/*opacity: 0.5; remove comment for hover reveal effect*/
}
5. Add Optional Hover Reveal Effect
In the snippet above I have added some extra code that will allow you to show the button when you hover over the image. You just need to make a few easy edits to make that happen. Everything is clearly noted in the code with instructions. If you need any help please watch the video to see what I mean.
6. View Results And Make Any Adjustments
Here is the result that I created in the video. I center aligned the text, set the text color to white, and added some left and right padding.
You may need to adjust the top: 44%; value. This will depend on some factors like how tall your button and image are and this is just a minor adjustment you may need to make on yours.
Add A Divi Call-To-Action Module Centered Over An Image Module
1. Add An Image Module And A Call-To-Action Module In The Same Column
Go ahead and add an Image module to a column. Then below it also add a Call-To-Action module. Here is what you should have so far:
2. Design The Modules
Of course you should take some time to adjust the Divi Builder design settings for both modules. Remember, this is the great thing about this method. You can use all the normal design settings for both modules!
3. Add A CSS Class To The Column
Now go to the Row Settings>Column Settings>Advanced tab>CSS ID & Classes toggle and add “pa-text-button-over-image” to the CSS Class input field. This class is used in the CSS snippet below to target this particular column. So you can add this custom class to any column that you want to have text and a button over an image.
4. Add The CSS Snippet To Your Website
Now it’s time to add the CSS snippet that does all the work for us.
/*move and position the Call-To-Action module over the center of the Image module*/
.pa-text-button-over-image > .et_pb_promo {
position: absolute;
top: 44%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 100%;
transition: opacity 0.3s ease-in-out;
/*opacity: 0; remove comment for hover reveal effect*/
}
/*add an optional overlay over the image*/
.pa-text-button-over-image > .et_pb_image .et_pb_image_wrap:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9;
transition: opacity 0.3s ease-in-out;
opacity: 0.5; /*make this 0 for hover reveal effect*/
}
/*show overlay on image hover*/
.pa-text-button-over-image:hover > .et_pb_promo {
/*opacity: 1; remove comment for hover reveal effect*/
}
/*show call-to-action on image hover*/
.pa-text-button-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
/*opacity: 0.5; remove comment for hover reveal effect*/
}
5. Add Optional Hover Reveal Effect
In the snippet above I have added some extra code that will allow you to show the button when you hover over the image. You just need to make a few easy edits to make that happen. Everything is clearly noted in the code with instructions. If you need any help please watch the video to see what I mean.
6. View Results And Make Any Adjustments
Here is the result that I created in the video. I center aligned the text, set the text color to white, removed the ugly blue background, added some left and right padding, and styled the button. Note that you will need to add a link to the button for it to show up!
You may need to adjust the top: 44%; value. This will depend on some factors like how tall your button and image are and this is just a minor adjustment you may need to make on yours.
I hope you have enjoyed learning How To Place A Button And/Or Text Over An Image In Divi. 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 in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
OUR ONCE A YEAR SALE IS HAPPENING NOW!!!
25% OFF all Divi Plugins, Courses, and Child Themes!
The recommendation here would be to use two different rows one over the other and place the image text pair in two different columns for the perfect results. 🙂
Loved this tutorial! I tried to use it to add A Divi Text Module Centered Over An Image Module.
However when using the CCS snippet provided, I keep getting the messages ‘expected RBRACE’ at around line 3, and ‘unexpected token’ all the way at the bottom.
I’m not sure what the issue is and/or whether I should manually adjust any opening and closing braces in the snippet text provided?
I am afraid that I am not able to replicate the issue on my end. Please make sure to copy the code accurately and place it in Theme Options > Custom CSS Panel.
If there is no issue in copy and pasting then the possibility is that the existing CSS code has some issues and that is the reason for the error getting displayed so please make sure that the other CSS Code is not causing any conflict.
This is really strange as on my end it works perfectly fine. Could you please create a small video using loom or anything else and provide me the link so that I can exactly see where things are going wrong for you?
YOU ARE A GOD!!
Thank you, I’ve tried a few Divi tutorials, none have worked but this one worked instantly and super easy to configure to meet specific requirements!
Thanks a bunch!
How do you change the text type (need to know what to insert, I am a rookie) for the button and how do you give the color of the button some opacity of around 50%?
Hey Job, when you hover over the button while editing then you will spot few icons and from them click on the settings icon. After that you will see the content tab where you can update the text of the button. To provide color to the button you need to go to the design tab within the button module settings and enable use custom styles for button and after that click plus sign on the background color settings and slide down the right most bar to decrease the opacity.
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!
I’m pleased to announce our next update to version 2.2 of our Divi Events Calendar plugin with a full new search and filter module!
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.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}
Hi there, How do you make it work if there are 2 images in a column and you want different text overtop each image?
Hi Dayna,
The recommendation here would be to use two different rows one over the other and place the image text pair in two different columns for the perfect results. 🙂
Loved this tutorial! I tried to use it to add A Divi Text Module Centered Over An Image Module.
However when using the CCS snippet provided, I keep getting the messages ‘expected RBRACE’ at around line 3, and ‘unexpected token’ all the way at the bottom.
I’m not sure what the issue is and/or whether I should manually adjust any opening and closing braces in the snippet text provided?
Yes you guessed: newby…
Hi Lis,
I am afraid that I am not able to replicate the issue on my end. Please make sure to copy the code accurately and place it in Theme Options > Custom CSS Panel.
If there is no issue in copy and pasting then the possibility is that the existing CSS code has some issues and that is the reason for the error getting displayed so please make sure that the other CSS Code is not causing any conflict.
Let me know how it goes. 🙂
Hi Lis,
I had the same errors.
I did go to the dashboard – Divi – Theme Options – scrolled down to the end – and placed the code in the black rectangle – save changes.
Hi Jan,
This is really strange as on my end it works perfectly fine. Could you please create a small video using loom or anything else and provide me the link so that I can exactly see where things are going wrong for you?
YOU ARE A GOD!!
Thank you, I’ve tried a few Divi tutorials, none have worked but this one worked instantly and super easy to configure to meet specific requirements!
Thanks a bunch!
Thank you, I’m so glad you are enjoying our tutorials!
How do you change the text type (need to know what to insert, I am a rookie) for the button and how do you give the color of the button some opacity of around 50%?
Hey Job, when you hover over the button while editing then you will spot few icons and from them click on the settings icon. After that you will see the content tab where you can update the text of the button. To provide color to the button you need to go to the design tab within the button module settings and enable use custom styles for button and after that click plus sign on the background color settings and slide down the right most bar to decrease the opacity.
Great work! I appreciate all your time in sharing all your tips and tricks. You are a Master!!!
Thank you James, it is a pleasure!