How To Move The Divi Gallery Title And Caption Text Over The Image Tutorial By Pee Aye Creative

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

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

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.

8

Last updated Apr 12, 2022 @ 2:34 pm

Subscribe

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

  1. Spencer Taylor

    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

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart