Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Place A Button And/Or Text Over An Image In Divi

Nelson Miller Profile Orange
In this tutorial I will show you how to add a button module or text module positioned centered over an image module in Divi.

▶️ 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:

add a Divi image module and button module to same column

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.

add a custom CSS class for putting a Divi Button module 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:

add a Divi button module over an image module
add button on hover over image in Divi min

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:

add a Divi image module and text module to same column

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.

add a custom CSS class for putting a Divi Text module 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.

add a Divi Text module over an image module
add text on hover over image in Divi min

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:

add a Divi image module and call to action module to same column

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.

add a custom CSS class for putting a Divi Call To Action module 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!

add a Divi call to action module over an image module
add call to action on hover over image in Divi min

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.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

59 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. Simon Nute <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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.

    Reply
    • Hemant Gaba

      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?

      Reply

Comments By Others

  1. Adam S

    This doesn’t work anymore.

    Whenever you add the code, and save it, Divi will remove all of the code pasted in any of the mentioned boxes so that they are blank.

    Reply
    • Hemant Gaba

      Hi Adam!

      It seems to be a issue from the Divi end. Please check in safe mode and see if it working. If not, contact Elegant themes support.

      Reply
  2. Christoph Hillen

    Hi, thanks for that!
    Do you also have a solution if I want to add 2 or more buttons over one (wide) image?
    Thanks again!

    Reply
    • Hemant Gaba

      Hi Christoph!

      Please add two button modules and then share the URL of the image, so that I can provide you the appropriate CSS as per the image.

      Reply
  3. Steven Shelton

    Does this solution still work?

    I’m working on a draft page (so no URL), and it doesn’t work for me. I’ve placed the code in CSS User, the Page Custom CSS, and the Divi Theme Options CSS. No matter what I do, the button never moves.

    I’m using Divi ver 4.22.2 and Divilife Child Theme ver 1.0.0

    Reply
    • Hemant Gaba

      Hi Steven!

      Please try adding !important in each code property and see if it helps. Ex:

      .pa-text-button-over-image > .et_pb_promo {
      position: absolute !important;
      }

      Reply
  4. Becky

    Hi – thanks for the great tutorial. I’m using the CTA module as my overlay, and I’m keeping the background color rather than removing it. Is there a way to make it the same size as the image? Right now, when you roll over the image, the text on the color shows up as the overlay. But the size of the colored background seems to be determined by the amount of text and the button rather than covering the full image. Is there something I can add to the css to make the overlay the same size as the image, no matter how much or how little text I use?,

    Reply
    • Hemant Gaba

      Hi Becky!

      I’m not sure if you have used the button from the CTA module or the Button module. Can you please share the URL of the page to investigate further?

      Reply
  5. Ron R

    Awesome, I am using just the” center text css” over image module and it works perfectly.

    /*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*/
    }

    But I want to use the standard image module’s Opacity Rollover effect, but the text overlay is half blocking my rollover area.
    Everything from the text downward is blocking the image layer rollover effect beneath it.

    I am sure there is some easy CSS to add here to have the text layer area not extending beyond the actual text.

    How might I do this?

    Thanks

    Ron

    Reply
    • Hemant Gaba

      Hi Ron!

      The Margin-top: -35px added in the Text module is causing the issue. Please remove it to align the text correctly.

      Reply
    • Hemant Gaba

      Hi Ron!

      Could you please share the URL of the page in order for me to investigate the issue?

      Reply
  6. Phoenyx

    I have been working on this specific function for three days and cannot get it to work. I have put the code where instructed to do so and also configured the rows, but the end result is still an image above my button. Do you have any suggestions?

    Reply
    • Hemant Gaba

      Hi Phoenyx!

      Could you please share the URL of the page in order for me to investigate the issue?

      Reply
  7. Gene Sorensen

    Hello Nelson and Hemant, thank you very much for this tutorial. I have not been able to get my button centered over the image. It remains in a row under the image. I have added pa-button-over-image to the CSS Class input field, and copied the text from your field above using your copy button—and then placed it in Theme Options > Custom CSS Panel.

    The only thing I can think of is I am not creating the button in the right place. I am an inexperienced Divi user. I have a full-width image in one row with a button in a row beneath. Is that the correct way to do this? Thanks for your help.

    Reply
    • Hemant Gaba

      Hi Gene!

      Could you please share the URL of the website? It will help me to understand the issue better.

      Reply
  8. Allison

    I’m not getting this to work on my site. The text still appears below the image, not overlaid. I have the code installed on the scripts.css page of the child theme, but clearly, I’m missing something.

    Reply
    • Hemant Gaba

      Hello Allison!

      Please make sure you have added the CSS class in the column settings as suggested in the article above.

      If still getting the issue, could you please share the URL of the page for me so I can check it?

      Reply
  9. Don Maynard

    Hi,

    I was able to get the CSS to work on my site, but had a question about the button design. The button text is fine, but I added the shopping cart icon after the text. The cart icon looks fine in the Divi editor, but does not display in the page preview. Any suggestions?

    Reply
  10. Don Maynard

    Hi,

    Appreciate the tutorial! However, I have not been able to get the CSS to work on my site (in development)… I believe I followed the instructions and entered the CSS code in Divi/Theme Options/Custom CSS correctly. The button “Graphic Templates Shop Now” still remains below the image. Any suggestions?

    Reply
  11. Lynda

    Hi. This was a great tutorial! Just want I needed to add a button over a gallery for a client’s site. I am using it just for mobile and have a 2nd button I need to add. Is that possible? I was thinking I need to duplicate the button in a different row so it can have a different ID, but then it can’t be over the same gallery. Any suggestions? My test page (please view mobile to see it) is: http://box5397.temp.domains/~lookpho2/?page_id=242303

    Reply
  12. Janos

    Hi Nelson,

    Thank you for the tutorial.

    You use 2 layers in the tutorial, one image and one text layer.

    I want to use 3 (or more) layers.
    I want to put two pictures and a text above one picture.

    It’s is possible with this tutorial?

    Reply
  13. yas tres

    please could you help me I’m trying to add the “add to cart button” on all the products on the website and make work only by hovering over the product image or box
    this is my website: https://170-187-188-56.ip.linodeusercontent.com/24-2/
    *I’m noob and trying to learn the website is a test facility for me:D

    Reply
    • Hemant Gaba

      Hey there,

      I have checked the website and I guess this query is already fixed.

      Reply
  14. Trudy Barker

    I really appreciate your tips here, thanks so much for helping all us Divi users!

    Reply
  15. GB

    Is there a way to also add a .svg? I’ve already uploaded them, but can’t figure out how to include them. I want to put them on top of the text.

    Reply
  16. Aurelien

    Very interesting tutorial.

    Do you think it’s possible to do this for the portfolio module (replace the icon by a button) “see the project”?

    Thank you for your tutorials, always of great quality!
    Aurélien.

    Reply
  17. Amaia

    hi I think i’ve followed all the steps but my text is where it was before… i have ‘pa-text-over-image’ in the 2 column css classes in row settings then I have the copied blurb for text over image pasted in the child theme in css class… did i miss something?

    i feel like i’m spending forever and getting nowhere! thanks, Amaia

    Reply
    • Hemant Gaba

      Hey Amaia,

      Could you please share the URL of the page in order for me to investigate the issue?

      Reply
    • Amaia

      scrap that – just went out and back in and it has the text on the images! thanks!

      Reply
  18. Tyrel

    This is a great tutorial, very simple to follow, thank you.

    For some reason my text modual is not showing up above the image but seems to be getting placed by the image module, do you have any idea how I can fix this?

    The error is located on the home page of our site, the Character images at the bottom are the ones with the CSS code added.
    http://www.quirkyresource.com/

    Reply
    • Hemant Gaba

      Hey Tyrel,

      I have checked the website and I am not able to find any issue under the character heading that you have mentioned. Could you please check the website in incognito mode or in a different browser and see if that helps?

      Let me know how it goes.

      Reply
      • Tyrel

        Thanks for looking, It turned out when applying the CSS code that the text appeared quite far up the page. I thought it disappeared all together. When I adjusted some of the margin percentage it came back to center image. Thank you for the help.

      • Hemant Gaba

        Hey Tyrel,

        I am glad that the issue is resolved now. Let me know if you need any further assistance.

  19. Igor Pont

    I truly love this little gem – like I love all those other gems – that’s why I bought the lifetime all-access! Great work Nelson and Tasha! Keep it up!

    The only thing is that I have trouble getting it to work flawlessly on all screen sizes. You can see the result here: https://www.copernicus-dronten.nl/ and on smaller desktops the text slides over each other to become unreadable. On mobile it looked so crooked I replaced it entirely with a fixed image, but I’d like for it to work on desktops. Any tips?

    Thanks
    Igor Pont

    Reply
    • Hemant Gaba

      Hey Igor,

      You took a right step in changing the whole element with an image for the screens below 980px. For the desktop, the issue is happening because the top value that both the before and after pseudo-elements have are in percentages so it will adjust as the screen size changes but since the font-size is fixed that is in px so it is not adjusting accordingly and which is leading to an overlapping issue.

      To fix this set the top value in :after code to around 295px and set the top value in :before to 200px and the problem will be solved. You can change the values as well as per your liking.

      Let me know how it goes. 🙂

      Reply
  20. Alexander

    Very well detailed on your video and wording on this page. I appreciate you sharing this knowledge. Very helpful.

    I was hoping to know if you by any chance have a video on how to place two buttons on the same image? One button to the left of the image and the second button to the right of the image. If you don’t have a video, maybe a quick tip to know how to do it.

    I tried adding another button at the same area and changing the class name by just adding the word “right” to it.

    Reply
    • Hemant Gaba

      Hi Alexander,

      In this guide, you saw how we can place Text Module over an image. Now in the text module you can place the anchor tags inside the div like this:


      Now at the place of #, you can place the link you want people to get directed to on click. You can grab the classes given to the elements and style it using CSS and you will have two buttons on the image.

      Reply
  21. James Worthington

    Great work! I appreciate all your time in sharing all your tips and tricks. You are a Master!!!

    Reply
  22. Jon

    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%?

    Reply
    • Hemant Gaba

      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.

      Reply
  23. Tess

    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!

    Reply
  24. Lis

    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…

    Reply
    • Jan

      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.

      Reply
      • Hemant Gaba

        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?

    • Hemant Gaba

      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. 🙂

      Reply
  25. Dayna

    Hi there, How do you make it work if there are 2 images in a column and you want different text overtop each image?

    Reply
    • Hemant Gaba

      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. 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart