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.
▶️ Please watch the video above to get all the exciting details! 👆
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.

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.
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.
I’m glad you like it! We’ll be doing one just like it for the Portfolio soon too.