How To Move The Divi Gallery Title And Caption Text Over The Image

In this tutorial I will show you how to move the Divi Gallery module title and caption text over the image and add a nice hover effect.

Categories: Tutorials

Moving The Gallery Title Text

The Divi Gallery module have some limitations. The title text and caption text is below the image. But what if you want to change that and place it over/onto the image? There are no settings for that in the module, so in this tutorial, you will learn how you can place the title and caption text over the image in the Divi Gallery module. This will require the use of some jQuery and CSS code to accomplish the results, but the process is very easy to follow.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Subscribe On YouTube

1. Add A Custom CSS Class To The Divi Gallery Module

The first step to moving the Divi Gallery module title and caption text over the image is to add a custom CSS class to the module. This is used to target the module with the code shared in steps 2 and 3 of this tutorial. Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-gallery-text-over-image” in the CSS Class input field of the Contact Form module.

add CSS class to move Divi Gallery module title and caption text over the image

2. Use jQuery To Group The Title And Caption Text Together

Our goal is to place the title and caption text over the image. The problem is that these two items are separate, and in order to move and position them properly over the image, they first need to be grouped. This jQuery snippet is simply grouping the elements together and forming one new element, the “pa-gallery-text” class.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<script>
(function ($) {
	$(document).ready(function () {
			$(".pa-gallery-text-over-image .et_pb_gallery_item").each(function () {
				$(this).find(".et_pb_gallery_title, .et_pb_gallery_caption").wrapAll('<div class="pa-gallery-text"></div>');
			});
	});
})(jQuery);
</script>

3. Use CSS To Position and Style The Text

After adding the jQuery, the title and caption text will still remain below the image. So far we have only grouped those items, so now we are going to do the actual work of moving them with CSS.

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.

/*position the gallery items*/

.pa-gallery-text-over-image .et_pb_gallery_item {
	position: relative;
}


/*remove the default top margin from the title*/

.pa-gallery-text-over-image .et_pb_gallery_title {
	margin: 0 !important;
}


/*set the overlay z-index*/

.pa-gallery-text-over-image .et_overlay {
	z-index: 1;
}


/*position and style the title and caption text container*/

.pa-gallery-text-over-image .pa-gallery-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: rgba(17, 17, 17, 0.8);
	opacity: 0;
	transition: all .5s ease-in-out;
}


/*show the title and caption on hover*/

.pa-gallery-text-over-image .et_pb_gallery_item:hover .pa-gallery-text {
	opacity: 1;
}

/*added this to make the gallery images open in lightbox*/

.pa-gallery-text-over-image .et_overlay {
	pointer-events: all !important;
}

Position The Text

The snippet above will place the text at the bottom. This is because of the line justify-content: flex-end; If you want to move the text to the top, use justify-content: flex-start; instead. Or if you want to place the text in the middle, use justify-content: center;

The text is aligned left horizontally by default, but don’t forget, if you want to align the text to the center or right , you can do that in the module settings. Be sure to watch the video to see this explained better!

Hover Effect

In our snippet we have the text invisible to start and then appear on hover. If you prefer to show the text all the time, you can simply change the opacity in the .pa-gallery-text-over-image .pa-gallery-text to 1 and remove the snippet with the hover effect.

Overlay Color

Another thing you may want to change is the overlay color. In order to see the text on the image, it is necessary to have a darker overlay. The default overlay will not work in this case, so we are adding and setting the background color to rgba(17, 17, 17, 0.8); but you are welcome to adjust this.

Last updated Apr 12, 2022 @ 2:34 pm

That's it!

I hope you have enjoyed learning How To Move The Divi Gallery Title And Caption Text Over The Image. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

Spencer Taylor on April 13, 2022 at 8:35 pm

I saw this on YouTube and came for the blog post. Thanks for making this available! It’s handy for galleries and adds some customization over the default Divi experience.
Reply
- Nelson Lee Miller (aka The Divi Teacher) on April 14, 2022 at 6:42 pm
  
  I’m glad you like it! We’ll be doing one just like it for the Portfolio soon too.
  Reply