UPDATE: Check our our newer, better, and more comprehensive tutorial here: How To Place A Button And/Or Text Over An Image In Divi
Another Solution To A Missing Feature
Let’s Add A Button or Text Over An Image In Divi
As I learned Divi over the years, I’ve searched for a solution to add a button over an image. Most of them required adding a separate button module or using the call-to-action module, but that doesn’t work because the image is a background image, which crops weird and is not reliable and background images don’t help SEO. So I had to come up with my own hack. It’s not perfect, but it does work.
You may want to reference my other post about forcing image aspect ratio in Divi. It works great with this solution.
▶️ Please watch the video above to get all the exciting details! 👆
Button Over Image
The Button Is Always Centered Vertically and Horizontally
To achieve this, place an image module in your Divi layout and be sure to add a link. (OPTIONAL: I toggled on the image overlay in the design tab and set the icon to transparent and the overlay to a 50% black.)
Add the CSS class “pa-button-over-image” to the Advanced Tab>CSS ID & Classes>CSS Class. Next, copy the following code snippet and paste it in your websites.
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 button centered over image*/
.pa-button-over-image .et_pb_image_wrap:before {
content: "Click Here!";
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #000000;
color: #ffffff;
padding: 12px 24px;
font-size: 20px;
font-weight: bold;
border-radius: 50px;
transition: all .5s ease;
}
/*button on hover*/
.pa-button-over-image:hover .et_pb_image_wrap:before {
background-color: #ffffff;
color: #000000;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
letter-spacing: 1px;
}
Text Over Image
The Text Is Always Centered Vertically and Horizontally
To achieve this, place an image module in your Divi layout
Add the CSS class “pa-text-over-image” to the Advanced Tab>CSS ID & Classes>CSS Class. Next, copy the following code snippet and paste it in your websites.
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 text centered over image*/
.pa-text-over-image .et_pb_image_wrap:before {
content: "This Is The Headline";
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 40%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #ffffff;
padding: 12px 24px;
font-size: 28px;
font-weight: bold;
text-align: center;
border-radius: 50px;
transition: all .5s ease;
}
.pa-text-over-image .et_pb_image_wrap:after {
content: "If you want to, you can adjust the position of this text to the top left or bottom or whatevery you want.";
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 55%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #ffffff;
padding: 12px 24px;
font-size: 20px;
border-radius: 50px;
transition: all .5s ease;
text-align: center;
}
/*this changes the opacity of the image*/
.pa-text-over-image img {
-webkit-filter: opacity(40%);
/* Safari */
filter: opacity(40%);
margin-top: -1px;
}BONUS! Image Zoom & Rotate
Here’s the Bonus CSS Snippet For the Divi Image Zoom and Rotate Effect Seen On This Post
You probably noticed the hover effect. It’s one of my go-to CSS snippets that I use on most of my client sites. Just add the CSS class “pa-image-zoom-rotate” to the Advanced Tab>CSS ID & Classes>CSS Class.
/*zoom and rotate image on hover*/
.pa-image-zoom-rotate .et_pb_image_wrap {
overflow: hidden;
}
/*zoom and rotate image on hover*/
.pa-image-zoom-rotate img {
transition: all .5s ease;
}
/*zoom and rotate image on hover*/
.pa-image-zoom-rotate:hover img {
-webkit-transform: scale(1.05) rotate(1deg);
-ms-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
transition: all .3s ease;
}How To Use Different Text On Multiple Images
The #1 Question From the Comment Section
Since this seems to be the #1 question on my blog, I thought I should address it. To use this method on more than one image, simply copy the CSS snippet as many times as you need (the number of images) and then change the CSS selector for each one. So maybe use pa-text-over-image-1, pa-text-over-image-2, etc. Then just make sure to match that class in each of the image modules!
What About Tablet and Mobile?
The #2 Question From the Comment Section
To change the text or any styling such as font size on tablet or phone, you will need a CSS media query. You can learn all about them here: How To Add Custom CSS Media Queries To Divi
How Can I Add More Than One Button?
The #3 Question From the Comment Section
Honestly, if you are are needing more than one button, then you should just be using a column with multiple button modules. So add an image to the column background, then add text modules and buttons as needed.
Hi Nelson,
I’m trying to use the zoom in effect on a background image in a column. The result I get is that it zooms in the whole entire column, but I just want the effect to zoom in on the column background image. Is this possible?
Thank you!
-Rachel
Hi Rachel!
You need to set the background-size to over 100% on hover. Go to Column settings > Advanced > Custom CSS > Main element, and add the following code in hover state:
background-size: 140%;
transition: all 0.5s ease;
Let me know if it helps.