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

20180214122145_IMG_9804_01
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!

If you Divi CSS snippets like tips like this, please subscribe because we have tons of tutorials in progress to be posted!

Please share this post!

Nelson Lee Miller

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, and building websites with Divi.

You Earned A Reward

For a limited time, we are offering our best blog readers a random CRAZY big 20% off coupon to use on any of our child themes! Just subscribe and we'll send you the code!

Blog Reader Coupon Code

Nice, we're sending you the code now!

0

Your Cart