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!

/*add button centered over image*/

.pa-button-over-image-1 .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-1: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 button 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%;
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 .5s ease;
}

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

Your Cart