How To Add A Button or Text Centered Over An Image In Divi

How To Add A Button or Text Centered Over An Image In Divi

I'm excited to show you how to add a button or text centered over an image in Divi. I also threw in some nice hover effects. Enjoy!

UPDATE: Check our our newer, better, and more comprehensive tutorial here: How To Place A Button And/Or Text Over An Image In Divi

How To Place A Button And Or Text Over An Image In Divi Tutorial by Pee Aye Creative

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 ClassNext, copy the following code snippet and go to Dashboard>Divi>Theme Options>Custom CSS and paste the code there. You now have a button over and image 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.I added a background gradient in the content tab to make the text stand out better.

Add the CSS class “pa-text-over-image” to the Advanced Tab>CSS ID & Classes>CSS ClassNext, copy the following code snippet and go to Dashboard>Divi>Theme Options>Custom CSS and paste the code there. You now have a button over and image 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. You know what to do with the snippet!

/*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 To Add Custom CSS Media Queries To Divi For Making Your Site Responsive Tutorial by Pee-Aye Creative

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.

43
Last updated Jun 10, 2021 @ 7:16 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

133 Comments

  1. Samar

    Can you please tell us in details.I don’t understand

    Reply
  2. Megan

    What if I want a different button for each image?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hey Megan,
      Great question, all you have to do is change the class for each one. So for example, you can say .pa-button-over-image-1 and .pa-button-over-image-2 and keep the snippet the same except for that class, then change the words, colors, link, etc. for each one. Hopefully, that makes sense! 🙂

      Reply
      • Megan

        I’m so bad at this, lol. If all the information is in the dashboard Custom CSS and I change the Class CSS to say “.pa-button-over-image-1” then where do I customize that?

      • Nelson Lee Miller (aka The Divi Teacher)

        You can customize the words in the CSS snippet. You make sure the class and snippet have the same name. Also, remember not to use a . in the Divi CSS Class field. Feel free to send us a message for more help with this.

      • Laeni Gittins

        Thank you! I was about to ask – this has been most useful!

  3. Joane

    Hi Nelson! Great tutorial, thanks!!

    Not sure if I missed something, but how do you link the button to another page?

    Thanks!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Joane,
      Just add your link in the image module settings. I know it is not quite obvious, but the image module is doing the work, the button is just more familiar to click.

      Reply
  4. BB

    I can’t find the option to toggle the overlay option in the image module.
    “OPTIONAL: I toggled on the image overlay in the design tab”

    Reply
    • Support Support

      It’s a Divi quirk. Add a link first in the content tab, then the overlay toggle appears in the Design tab.

      Reply
  5. Marloes

    This is perfect thank you!! Do you also know a way to change the font? It’s now the default body text font right? I would love to make it the header font. Thanks in advance!

    Reply
    • Support Support

      Hey Marloes,
      You are welcome! To change the font, just add the font family to the CSS code along with the other properties. So for example, add “font-family: ‘Poppins’, sans-serif;” in the list of other items in the CSS snippet.

      Reply
      • Marloes

        Thanks for the response! I tried it with Amatic SC (a Google Font) but the font changes to something else, looks like Arial. Is this because it’s not a standard font?

      • Support Support

        Most likely it is being controlled by another font setting, so go ahead and use !important like this font-family: ‘Amatic SC’, cursive!important;

      • Marloes

        I got it! It works when I put font-family: Amatic SC instead of font-family: ‘Amatic SC’ 😀 thank you for your help!

  6. Laeni Gittins

    How do I make the buttons square and not round?

    Reply
  7. Louise Sellebjerg

    Text over image
    What if you have 10 image that should have different text-buttoms…. how do you do that – ex. in a image-gallery..
    Could you please make a video with this….too….?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      This would not be applicable to the gallery module, you could use the caption instead. But for multiple photos, you would simply duplicate the code snippet and change the class and the text. For example, change pa-button-over-image to pa-button-over-image-2 in both the module and the snippet. We will have a video on this published this week!

      Reply
      • Louise Sellebjerg

        THANKS Nelson… so great with the video – because it is much easier for me to understand when I see a video with it. And yes – because sometimes you have eg. 10 images where you want a buttom on each image with different text…. it is just how to do that…. but will wait for your video 🙂

  8. Ashley

    What do I have to do to get the button on a fullwidth image?

    Reply
      • Ashley

        I have a fullwidth image at the top of my home page. I don’t want to use the fullwidth header option because it isn’t customizable enough. I tried using this code to get a button on the fullwidth image but it didn’t seem to work. I’m wondering if I need to change something in the code to get it to work?

      • Yoona

        Hello,

        Was there ever an answer to this question?

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Ashley,
        I’m a little confused, but I think you should have an image in the background of the section, then add a button module.

  9. Marina

    Hey, Nelson,
    How to make this work with a blog posts module? Is it possible?

    Thanks a lot. Have a nice day.

    Reply
      • Marina

        Hey Nelson,
        sorry I didn’t explain correctly. I mean https://poosh.com/ like they did with their posts. When you hover over the picture you see the read more button and you can click and it would lead to the blog post.

  10. SEBASTIAN ARENAS

    this was awesome and is 99% of what I need,,, but, how can I do all 3 things on the same image module?

    i want to have 2 column, each with a different image, text and button. I cant seem to add 2 css classes with a coma

    Reply
  11. Amalialala

    Thank you for this post, it’s great! I have two questions:
    1. How do you add the link to either the button or text?
    2. What if I need two different styles on one line of text. For example “click here” I want “here” in a different font and weight?
    Thanks !

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Amalialala,
      You set the link in the image module as described in the post. As for your second question, it would take a lot more CSS to do that and at that point, it would not be worth it in my opinion.

      Reply
  12. Juan

    Hello, thanks for the tutorial. How do I make the text appear only when I put the mouse over the image?

    Reply
  13. Adam

    Hopefully you’re still around to answer a question, but the end of your bonus snippet is missing. It’s a really cool effect but I can’t implement it as is.

    Awesome stuff though, mate.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hey Adam,
      I’m certainly still around! We have tutorials each Tuesday and quick tips on Thursdays. I updated the code in the article, not sure how that got cut off but you should be all set now!

      Reply
  14. Germán

    Hello,
    Firstly thanks for all. Is there any option to add text and button at the same time? Like a call to action over image.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hello,
      You would have to use both, which we mentioned there in the article. However, it could get messy and I personally wouldn’t try it. It might be best to use the Call To Action Module.

      Reply
  15. zea

    I like this article it helps me a lot. Cool stuff! I’d like to know if by adding text Over An Image can google recognize it?

    Reply
      • zea

        Yeay, Thank you so much! I’ve joined your facebook group to learn something new.

  16. Rachel Leach

    Is it possible to not have the button centred? so you also have multiple text links over a single image?

    Reply
  17. Lukas Schorn

    Hi Nelson, great tutorial thank you! I was wandering, how you can place a button AND a text on the image? Please let me know, thanks!

    BR

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Lukas,
      I’ve answered this in another comment, basically if you want to do that I wouldn’t bother, I would just use the image in the background of the column and set a text and button, or use a call-to-action module. If you really want to though, you can use text on the :before option, and make the :after into a button.

      Reply
      • Lukas Schorn

        Hi Nelson, thank you for your quick reply! I saw that just after sending my question, sorry xD Ok call-to action-module looks good but , how can I target the background picture of the column and apply the zoom-in effect there? Please let me know. Thank you very much! All the rest is great!

  18. Tom

    hello, I am curious since I have multiple photos can I somehow customize each button? say I have 3 pictures in a row, can I have a button that says different things on each picture?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Tom,
      Sure, you can just add a different class to each image, then copy the code three times and add that same class in the CSS selector of each snippet.

      Reply
  19. Walkman Azimi

    Hello, It Was A Great Tutorial.
    I Have A Question How Can We Add Button To Product Images?
    Thanks
    Walkman Azimi

    Reply
  20. Ravi

    Hey, thanks for the quick way of adding text button on image, it works like a charm. However the formatting is messed up on while accessing page on mobile. is there a quick way to set responsive settings

    Reply
  21. May

    Hi Nelson,

    Thanks for sharing! Great post. Is it possible to make the text invisible (or zero opacity) before hover and have it visible after hover?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi May,
      Yes for sure, just be sure to add :hover to the CSS for any styles you want when hovering. .pa-button-over-image:hover .et_pb_image_wrap:hover:before {

      Reply
  22. Leonardo J Farinas

    Great solution to an all time wanted feature. HUGE thumbs up from me. Been needing this for a long time now. Much appreciated!

    Reply
  23. Nathan Hush

    Hi,

    Can you please tell me, how do you place Title text and Excerpt over featured image in *Divi BLOG Module*, that works responsively.

    I can’t find it anywhere.

    Please

    Reply
  24. Stephanie

    Hello. I am also inquiring about what to do if I want a different button for each image. I get where to change the class for each one at, but where does the CSS go – the dashboard on in each individual module for the image? Also, what is a CSS snippet? If you have a video on how to do this, please let me know!!
     
    THanks for your help!

    Reply
  25. IGNACIO ALONSO PEREZ

    Hi, thank you for the post! I have a question. I would like that the bottom that i will call “see more” only appears when i put the mouse on the image. (It is a tour option so when the people put the mouse on the image i would like that the bottom “See more” can be seen) How can i do that?
    Thank you man!
    Ignacio Pérez

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      For sure you can do this. You just have to add :hover in the CSS. So copy the snippets but add in :hover like .pa-button-over-image .et_pb_image_wrap:hover:before

      Reply
  26. Spencer

    Hey Nelson, love your work man!
     
    If you are looking for new ideas for Divi tutorials would love to see something like the hover effect on the images this website..https://wanderers.qodeinteractive.com/
     
    Basically the Title and Subtitle are bottom left but as you hover over you get almost an accordion effect of extra text expanding. – I tried to attached a gif of it.
     
    Have had a try with hover effects but doesn’t look as slick as this one.
     
    Thanks!

    Reply
  27. Magalie

    Is there a way of doing this (the text over image) if you have like 8 images on the page? Because the Css code only works for image on the page…any way of doing this?

    Reply
  28. Magalie

    Hi Nelson,

    You really helped with other things I needed on here. Sorry for the previous comment it’s not clear at all. I was looking at the “Text On Image” tutorial and got it to work on one image, however, I have 8. I tried to figure out a command/code that I can use so that it works the same except the name of the content is different on each image i.e image 1 – content: “pie” and image 2 – content: “jam” but it didn’t work. Is there any coding that I can use to make the code on the Custom Css (on Dashboard) versatile to be manageable for each image? It looked great for the one and I would love it to work for the other 7. Thanks. Much appreciated.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Magalie,
      It sounds like you have the right idea. You would change the CSS selector for each of the 8 snippets, then make sure they match in the module CSS class.

      Reply
  29. viktor

    hi nelson! great tutorial, great work thanks!!
    how can i change the fonts size for mobil view?

    Reply
  30. Michael Hayden

    Legend Nelson, been struggling for a while with a two column layout with a text and a button, The button(s) are a big help! Now to connect a tool tip to the button on hover to negate the need for text and a button. Wish me luck! An overview of the CTA module would be great will subscribe to YouTube Channel!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Thank Michael, for some reason I very rarely use the CTA module, I think probably because with column design settings now we can do the same there, but thanks for the suggestion!

      Reply
  31. Shahid Zafar

    Hi,

    Great Post, Thanks for SHaring!
    I Have a question, How can we add 2 buttons to call 2 action module?

    Reply
      • Shahid Zafar

        Is there any way to center a separate button to call 2 action module in a column?

      • Nelson Lee Miller (aka The Divi Teacher)

        I’m not sure what you mean, but you don’t really need the Call To Action module anymore. Just use a column with a text module and then two buttons.

      • Shahid Zafar

        Thank u so much!
        Highly Appreciated!!! 🙂

  32. Jim

    So helpful! That’s two times you’ve saved me today. Kudos to you.

    Reply
  33. Asheq

    Hi Nelson,

    Thanks for this great tutorial. I have styled my website better with your CSS. Could you please help me, how do I disable following part on tablet and mobile device:

    .pa-text-over-image .et_pb_image_wrap:before {
    content: “This Is The Headline”;

    Regards,
    Asheq

    Reply
  34. Dóri

    Thank you so much! this helped to make 1 button. Could you tell me If it is possible to make 5 buttons on one photo.
    I need the image to be static but the buttons to hover. I have tried a lot but nothing is working for me.

    Reply
      • Dóri

        I looked at that, but I am trying to make a full screen header image with 5 possible buttons to choose from. When I do it the way you said in the bottom of the post, it doesn’t let me make the image full screen.

  35. Catherine Kingsbury-Smith

    I couldn’t get the button to work on a full width image. Please help!

    Reply
  36. Alex

    hy, this was a great tutorial, works fine except one thing, my button has two words, when i hover the thw words move one under the other and i want the words to stay on the same line. How can i do that? Thank you

    Reply
  37. Winfried

    Hi
    i changed your code as to display a button only when hovering.
    Probably not a clean code as i don’t have done anything in css.

    /*add button centered over image*/

    .pa-button-over-image .et_pb_image_wrap:before {

      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 {
         content: “Naar de winkel>”;
      line-height: 1.3em;
      z-index: 9999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      background-color: #ffffff;
      color: #000000;
      transition: all 0.5s;
      -moz-transition: all 0.5s;
      -webkit-transition: all 0.5s;
      letter-spacing: 1px;
    }

    Reply
  38. Tim McMichael

    How do I add the play icon instead of text? I am not finding that here.

    Reply
  39. Iggy

    Hi. Can you provide the solution to add an anchor link to the button?

    Reply
  40. Zol

    Hi. Is it possible to do it so, that only the button responds to hover, not the whole image?

    Reply
  41. Edwin Spiessens

    Hi Nelson

    Thanks for all your amazing tips!

    Not sure if this falls under the same CSS hack…
    But to achieve this kind of blog grid layout, with the date on top of the post images

    I would love your suggestion on how to tackle that?

    Cheers,

    Edwin

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Edwin,
      You’re welcome, glad you are enjoying them! This is definitely different. It’s harder than you would think to create this. If I spend some time on it I’m sure I could get it and I will share that as blog post if I do!

      Reply
  42. Ryan O'Donnell

    Hi

    This is perfect exactly what i need!

    Only issues is that when i hover there seems to be what looks like a plus symbol behind the text. I cant seem to see where this comes from at all?

    Any idea how to fix this?

    http://ryan-design.co.uk/dk-test-2/ link to see what i mean

    Reply
  43. Kellmo

    Could you give the code for just having a button show up on the hover?? To clarify, the user would only see a button when they hover over the image.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Kellmo,
      Sure, so it’s much easier than you may think. Notice how each code snippets are similar, but one has :hover. That’s all you need, so just add that :hover part in the code and then delete the second snippet.

      /*add button centered over image on hover*/

      .pa-button-over-image:hover .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;
      }

      Reply
  44. Joachim Eriksen

    Hi! Thank you for a great tutorial man! Just have a quick question. How can i add both the button and text over the image? When i use both css codes, the heading is going into my button and the text i want to use in the button disappearing… I want my button in the middle and heading on the top. Is this something that is a “quick” fix? 🙂

    Reply
      • Joachim Eriksen

        Thank you for your reply! I found another way to solve it. Keep up the good work man! Learn alot from you.

  45. Dan Merrick

    I believe i have the newest install of divi builder. My Custom CSS a Before, Main Element and After section. When I past your code it gives me an error at the beginning of “an expected RBrace” and at the end an error of “unexpected token “}”. Do you have any suggestions

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Dan,
      You can’t add CSS like that with classes to the modules, since the modules are already their own CSS classes. Make sure to paste it in Divi Theme options, these instructions are in the post 🙂

      Reply
  46. JAVIER ROMERO

    Awesome! very helpful. Thanks so much!!

    Reply
  47. Ramu

    Can we add text on the specific position of image like at the top or bottom?

    Reply
    • Hemant Gaba

      Yes we can do that by changing the value of the top and the left property in the above code. Please try changing the values in the code and let us know how it goes. 🙂

      Reply
  48. Merlin Hüttl

    Hi, this works out very well. Unfortunately the WPML Plugin does not recognise the text content which hovers the image. How can I solve this problem?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      I doubt you will be able to get that to work since this is using the CSS pseudo class. The only option is to explore using an actual button module positioned over the image but it will not be easy at all.

      Reply
  49. Flavian Dürrenberger

    Hi Ramu
    Thanks so much for your instructions. Question: Is it possible to have the overlay text just on the hover?
    Thanks already!

    Reply
  50. Bre

    I have a question. I am new to all this. And I am trying to add this button, and getting ready to scream, or maybe already have. When I go to add the Custom CSS, I have the option for “Before” “Main Element” and “After” Which one do I put the css code in? ALso when I paste it in, I get a red box that says Expected RBRACE, and at the bottom another red box Unexpected token “}” Any ideas?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Bre,
      You have good questions, but you really don’t need to worry about that until you get to that point. If you follow the tutorial the code uses the :before and :after and you can just follow it. As for that RBRACE it means you are placing the code in the wrong place, so be sure to place code in Theme Options.

      Reply
  51. Gabriel

    How can I give the button a font I uploaded (custom font)?

    Reply
  52. shay

    Hi Nelson,
    does this work with fullwidth image modules? i tried the text one and i cannot get it to work. I have followed all instructions.
    thanks

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      I’m not sure why you would use a fullwidth module though, I can honestly say I have never used one in my entire career. Just use a regular image module.

      Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart