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

How To Place A Button And/Or Text Over An Image In Divi

In this tutorial I will show you how to add a button module or text module positioned centered over an image module in Divi.

The Process

We have three different things we are showing you today.

  • Text over an image
  • Button over an image
  • Text AND a button over an image

Each of these have the same steps, so just choose whether you want a button, text, or both and proceed with that one. The steps are pretty simple. Add the modules to your layout, add a custom CSS class to that column, adjust the design settings, and add the CSS snippet. 

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Add A Divi Button Module Centered Over An Image Module

1. Add An Image Module And A Button Module In The Same Column

Go ahead and add an Image module to a column. Then below it also add a Button module. Here is what you should have so far:

add a Divi image module and button module to same column

2. Design The Modules

Of course you should take some time to adjust the Divi Builder design settings for both modules. Remember, this is the great thing about this method. You can use all the normal design settings for both modules!

3. Add A CSS Class To The Column

Now go to the Row Settings>Column Settings>Advanced tab>CSS ID & Classes toggle and add “pa-button-over-image” to the CSS Class input field. This class is used in the CSS snippet below to target this particular column. So you can add this custom class to any column that you want to have a button over an image.

add a custom CSS class for putting a Divi Button module over an image

4. Add The CSS Snippet To Your Website

Now it’s time to add the CSS snippet that does all the work for us.

/*move and position the Button module over the center of the Image module*/

.pa-button-over-image > .et_pb_button_module_wrapper {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -45%);
	z-index: 10;
	transition: opacity 0.3s ease-in-out;
	/*opacity: 0; remove comment for hover reveal effect*/
}


/*add an optional overlay over the image*/

.pa-button-over-image > .et_pb_image .et_pb_image_wrap:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000000;
	z-index: 9;
	transition: opacity 0.3s ease-in-out;
	opacity: 0.3; /*make this 0 for hover reveal effect*/
}


/*show button on image hover*/

.pa-button-over-image:hover > .et_pb_button_module_wrapper {
	/*opacity: 1; remove comment for hover reveal effect*/
}


/*show overlay on image hover*/

.pa-button-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
	/*opacity: 0.3; remove comment for hover reveal effect*/
}

5. Add Optional Hover Reveal Effect

In the snippet above I have added some extra code that will allow you to show the button when you hover over the image. You just need to make a few easy edits to make that happen. Everything is clearly noted in the code with instructions. If you need any help please watch the video to see what I mean.

6. View Results And Make Any Adjustments

Here is the result that I created in the video:

add a Divi button module over an image module
add button on hover over image in Divi min

You may need to adjust the top: 44%; value. This will depend on some factors like how tall your button and image are and this is just a minor adjustment you may need to make on yours.

Add A Divi Text Module Centered Over An Image Module

1. Add An Image Module And A Text Module In The Same Column

Go ahead and add an Image module to a column. Then below it also add a Text module. Here is what you should have so far:

add a Divi image module and text module to same column

2. Design The Modules

Of course you should take some time to adjust the Divi Builder design settings for both modules. Remember, this is the great thing about this method. You can use all the normal design settings for both modules!

3. Add A CSS Class To The Column

Now go to the Row Settings>Column Settings>Advanced tab>CSS ID & Classes toggle and add “pa-text-over-image” to the CSS Class input field. This class is used in the CSS snippet below to target this particular column. So you can add this custom class to any column that you want to have a text over an image.

add a custom CSS class for putting a Divi Text module over an image

4. Add The CSS Snippet To Your Website

Now it’s time to add the CSS snippet that does all the work for us.

/*move and position the Text module over the center of the Image module*/

.pa-text-over-image > .et_pb_text {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -45%);
	z-index: 10;
	width: 100%;
	transition: opacity 0.3s ease-in-out;
	/*opacity: 0; remove comment for hover reveal effect*/
}


/*add an optional overlay over the image*/

.pa-text-over-image > .et_pb_image .et_pb_image_wrap:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 9;
	transition: opacity 0.3s ease-in-out;
	opacity: 0.3; /*make this 0 for hover reveal effect*/
}


/*show overlay on image hover*/

.pa-text-over-image:hover > .et_pb_text {
	/*opacity: 1; remove comment for hover reveal effect*/
}


/*show text on image hover*/

.pa-text-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
	/*opacity: 0.5; remove comment for hover reveal effect*/
}

5. Add Optional Hover Reveal Effect

In the snippet above I have added some extra code that will allow you to show the button when you hover over the image. You just need to make a few easy edits to make that happen. Everything is clearly noted in the code with instructions. If you need any help please watch the video to see what I mean.

6. View Results And Make Any Adjustments

Here is the result that I created in the video. I center aligned the text, set the text color to white, and added some left and right padding.

add a Divi Text module over an image module
add text on hover over image in Divi min

You may need to adjust the top: 44%; value. This will depend on some factors like how tall your button and image are and this is just a minor adjustment you may need to make on yours.

Add A Divi Call-To-Action Module Centered Over An Image Module

1. Add An Image Module And A Call-To-Action Module In The Same Column

Go ahead and add an Image module to a column. Then below it also add a Call-To-Action module. Here is what you should have so far:

add a Divi image module and call to action module to same column

2. Design The Modules

Of course you should take some time to adjust the Divi Builder design settings for both modules. Remember, this is the great thing about this method. You can use all the normal design settings for both modules!

3. Add A CSS Class To The Column

Now go to the Row Settings>Column Settings>Advanced tab>CSS ID & Classes toggle and add “pa-text-button-over-image” to the CSS Class input field. This class is used in the CSS snippet below to target this particular column. So you can add this custom class to any column that you want to have text and a button over an image.

add a custom CSS class for putting a Divi Call To Action module over an image

4. Add The CSS Snippet To Your Website

Now it’s time to add the CSS snippet that does all the work for us.

/*move and position the Call-To-Action module over the center of the Image module*/

.pa-text-button-over-image > .et_pb_promo {
	position: absolute;
	top: 44%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 100%;
	transition: opacity 0.3s ease-in-out;
	/*opacity: 0; remove comment for hover reveal effect*/
}


/*add an optional overlay over the image*/

.pa-text-button-over-image > .et_pb_image .et_pb_image_wrap:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 9;
	transition: opacity 0.3s ease-in-out;
	opacity: 0.5; /*make this 0 for hover reveal effect*/
}


/*show overlay on image hover*/

.pa-text-button-over-image:hover > .et_pb_promo {
	/*opacity: 1; remove comment for hover reveal effect*/
}


/*show call-to-action on image hover*/

.pa-text-button-over-image:hover > .et_pb_image .et_pb_image_wrap:before {
	/*opacity: 0.5; remove comment for hover reveal effect*/
}

5. Add Optional Hover Reveal Effect

In the snippet above I have added some extra code that will allow you to show the button when you hover over the image. You just need to make a few easy edits to make that happen. Everything is clearly noted in the code with instructions. If you need any help please watch the video to see what I mean.

6. View Results And Make Any Adjustments

Here is the result that I created in the video. I center aligned the text, set the text color to white, removed the ugly blue background, added some left and right padding, and styled the button. Note that you will need to add a link to the button for it to show up!

add a Divi call to action module over an image module
add call to action on hover over image in Divi min

You may need to adjust the top: 44%; value. This will depend on some factors like how tall your button and image are and this is just a minor adjustment you may need to make on yours.

10
Last updated Jun 7, 2021 @ 10:53 am

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!

0 Comments

Submit a Comment

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

Recent Posts

Welcome Hemant To Our Team

Welcome Hemant To Our Team

I would like to introduce you to our new team member, Hemant Gaba, who has been helping out with everything behind the scenes!

Pin It on Pinterest

0

Your Cart