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!

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!

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!

9

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
63 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
10 months 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
9 months 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
9 months 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
9 months ago

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

Marloes
9 months 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
9 months 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
9 months 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
9 months 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
9 months 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
7 months ago

How do I make the buttons square and not round?

Laeni Gittins

Thanks Nelson.

Louise Sellebjerg
Louise Sellebjerg
6 months 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
5 months 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
1 month ago

Hello,

Was there ever an answer to this question?

Marina
Marina
4 months 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
4 months 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
2 months 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
2 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
2 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
1 month 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
1 month 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
1 month 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
1 month 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
1 month 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
25 days ago

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

Ravi
Ravi
21 days 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
21 days 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
18 days 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
16 days 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

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart