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

Nelson Miller Pee Aye Creative
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.

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.

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

14 Comments

  1. Spencer Taylor <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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
  2. Ralph

    Hi, nan you show how to make the text appearing from below and the image zoomed in like this?://marvel.b3multimedia.ie/gallery/

    Reply
  3. Adrian Dingle

    Hi Guys, thanks for this, a few issues if I may?

    So .. this works great on Desktop -thanks! – but there are some weird things that I wonder if you could comment on in Tablet and Mobile modes that don’t work so well.

    1. On my 5th generation iPad, the titles just don’t appear on mouseover, UNLESS I right click on one of the images FIRST, and then it works!

    2. On mobile, the opacity blocks the images almost completely, and no titles appear on the images no matter what I do.

    Here’s the page that I’m working on; https://dingsbeerblog.com/pretty-pictures-of-beer/

    There’s also a problem with the resolution of images in the gallery on large, desktop screens, BUT I *think* that’s a DIVI gallery issue that has nothing to do with this bit of code, BUT that I have summarized below just in case it’s relevant.

    In the DIVI Gallery module on a large screen, images are appearing blurry, even though when they open in a (larger) lightbox they are showing perfectly with great resolution. That’s strikes me as odd, since if they are OK in the enlarged lightbox, surely they should be good in the smaller gallery box? Anyway I did some research and an article suggested that there is an image default setting that picks up a smaller image for the gallery module and forces it into the (larger) space in the gallery, causing the blurriness. Makes sense. So the solution says to adjust “Attachment Display Settings” in the Media Library. Of course, that option is missing from the Media Library on my site. I’m guessing that could be because the article is from 2020 or because I’m using Imagify, but either way that option is not displayed. OK …
    … more Googling suggests I can edit the options.php settings by going to the page in the backend that controls options.php, and manually changing things there. I find that, but all attempted saves when changing the image_default_size there, fail. Any ideas?

    Many thanks!

    Reply
  4. Adrian Dingle

    I’d also like to remove the grey tool tip of the image title that appears onmouseover.

    I’ve tried the JS that I found here https://www.learnhowwp.com/remove-title-text-image-hover/ but it doesn’t seem to work, perhaps because it conflicts with the code to get the image title moved?

    There are a ton of “solutions” online, but none of them seem to work.

    As always, all help appreciated.

    Reply
  5. Carlos

    Everything works well with Chrome, but Firefox (v 103.0.2) and Safari (v 15.6.1) show the text in the center of the slide. Any suggestions?

    Reply
    • Hemant Gaba

      Hi Carlos!

      Can you please share the URL of the page so that I can check further?

      Reply
  6. Mallory

    Is there a way to use this same effect to pull the blog title on top of the featured image in the gallery layout, with the overlay behind and not just for galleried images?

    Reply
  7. Jack

    Thanks Nelson for another great tutorial!

    I am having a issue with minimizing the gap between the ‘Title’ and the ‘Caption’. In design terms we talking about the leading.

    If you have any ideas or tips it would be much appreciated!

    Many thanks!

    Kind regards,
    Jack

    Reply
    • Hemant Gaba

      Hi Jack!

      I need to check the gap in order to provide the custom code accordingly. Can you share the URL of the page to investigate further?

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart