Code by Day | Explore By Weekend

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!

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.

42
Last updated Jan 3, 2021 @ 1:15 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!

Subscribe
Notify of
guest
121 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Samar
Samar
1 year ago

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

Megan
Megan
1 year ago

What if I want a different button for each image?

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

Laeni Gittins
Laeni Gittins

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

Joane
Joane
1 year ago

Hi Nelson! Great tutorial, thanks!!

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

Thanks!

BB
BB
1 year ago

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”

Support Support
Support Support
Reply to  BB
1 year ago

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

Marloes
1 year ago

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!

Support Support
Support Support
Reply to  Marloes
1 year ago

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.

Marloes
Reply to  Support Support
1 year ago

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
Support Support
Reply to  Marloes
1 year ago

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
Reply to  Support Support
1 year ago

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

Laeni Gittins
Laeni Gittins
1 year ago

How do I make the buttons square and not round?

Laeni Gittins

Thanks Nelson.

Louise Sellebjerg
Louise Sellebjerg
1 year ago

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….?

Louise Sellebjerg
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 🙂

Ashley
Ashley
1 year ago

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

Ashley
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
Yoona
Reply to  Ashley
10 months ago

Hello,

Was there ever an answer to this question?

Marina
Marina
1 year ago

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

Thanks a lot. Have a nice day.

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

SEBASTIAN ARENAS
SEBASTIAN ARENAS
1 year ago

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

Amalialala
Amalialala
1 year ago

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 !

Juan
Juan
11 months ago

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

Adam
Adam
11 months ago

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.

Germán
Germán
11 months ago

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.

zea
zea
10 months ago

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?

zea
zea

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

Rachel Leach
10 months ago

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

Lukas Schorn
Lukas Schorn
10 months ago

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

Lukas Schorn
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!

Tom
Tom
10 months ago

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?

Walkman Azimi
Walkman Azimi
10 months ago

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

Ravi
Ravi
9 months ago

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

May
May
9 months ago

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?

Leonardo J Farinas
9 months ago

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

Nathan Hush
Nathan Hush
9 months ago

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

Stephanie
Stephanie
8 months ago

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!

IGNACIO ALONSO PEREZ
8 months ago

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

Spencer
8 months ago

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!

Screenshot 2020-06-18 at 8.39.30 AM.png
Magalie
Magalie
8 months ago

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?

Magalie
Magalie
8 months ago

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… Read more »

viktor
viktor
8 months ago

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

Michael Hayden
Michael Hayden
8 months ago

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!

Shahid Zafar
8 months ago

Hi,

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

Last edited 8 months ago by Shahid Zafar
Shahid Zafar

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

Shahid Zafar

Thank u so much!
Highly Appreciated!!! 🙂

Jim
Jim
8 months ago

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

Asheq
Asheq
8 months ago

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

Asheq
Asheq

Thanks Nelson it worked perfectly !!

Dóri
Dóri
8 months ago

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.

Dóri
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.

Catherine Kingsbury-Smith
Catherine Kingsbury-Smith
8 months ago

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

Alex
6 months ago

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

Winfried
Winfried
6 months ago

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;
}

Tim McMichael
5 months ago

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

Iggy
Iggy
5 months ago

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

Zol
Zol
5 months ago

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

Zol
Zol

well, no change 🙁
could you take a look pls?
https://dubaiprogramok.com/aaa/

Edwin Spiessens
Edwin Spiessens
5 months ago

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

blog grid layout with date over images.jpg
Ryan O'Donnell
4 months ago

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

Ryan O'Donnell

Thanks lad your a legend!

I see it now, and now i kinda feel silly hahahaha thanks for the reply though!

Kellmo
Kellmo
4 months ago

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.

Joachim Eriksen
Joachim Eriksen
4 months ago

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

Joachim Eriksen
Joachim Eriksen

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

Dan Merrick
Dan Merrick
3 months ago

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

JAVIER ROMERO
JAVIER ROMERO
18 days ago

Awesome! very helpful. Thanks so much!!

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

Join over 5,300 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart