Add Modules Over The Image Module
Not A good Solution
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!
▶️ Please watch the video above to get all the exciting details! 👆
The Process
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.
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.
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.
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 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.
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 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.
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 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.
Hi, I am a complete Divi novice and just building my first website. Your blog and youtube videos have been a valuable resource and I thank you for them. I am using the CTA module over image and it is looking great on a desktop screen. However I am having difficulty in making it responsive.
I notice in a reply to a comment it talks about replacing the object completely. Could you just explain what you mean by this. Is it to duplicate the whole section and set the visibility to just tablet and mobile and change the image sizes etc and text accordingly? then of course set the original section to only appear on the desktop?
Really appreciate your help. I would love to take out the lifetime membership but I am only building a couple of sites at the moment for local charity so will have to see how I get on.
Hi Simon!
Yes, using the visibility option (hide on desktop and show on mobile) is one approach for the responsive issue. However, we can make it responsive using media queries as well. Can you please share the URL of the page to check further?