R37: How to Show the Gallery Image Title and Caption on Hover

Back in 2016 I wrote this post on How to Add Links to the Divi Gallery Module and Show Captions on Hover and it is one of my top 5 most popular posts. But its quite outdated now with all the extra Divi options available and not that easy to edit for beginnners, plus I had a load of questions about how to still allow the images to open in a lightbox.

So, as there is always more than one way to skin a cat, rather than update that post I decided to create a new one with the aim of keeping as much in the Divi module options as possible and making the additional code simple and flexible.

I am going to show you how to display the title and caption of a gallery image when the user hovers over the image, still allowing the image to open in the lightbox. As a bonus, I will also show you how to change the thumbnail image dimensions so you can have them square like my demo, or any other aspect ratio you choose, without having to resize your actual images (they will open at their original dimensions in the lightbox).

So let’s get cooking!

Ingredients

The latest version of the Divi Theme from Elegant Themes.

You only really need a child theme for this if you decide to change the gallery image thumbnail dimensions as we will be adding some code to functions.php, but I always recommend using a child theme regardless. It’s just safer

Cooking time

This should only take around 15 – 20 minutes.

Preparation

For the prep we need to set up our gallery. So add a new section and row to your page and then add the Gallery module.

In the Content tab, choose the number of images you want to display and make sure Show Title & Caption is set to Yes. It’s up to you whether you want to show pagination or not.

Next, click on Update Gallery and add the images you want to use to your gallery in the media library.  You need to make sure each image has a title and caption, and you can also select to have the images display in a random order if you wish. When you’re done, click Update Gallery.

Back in your module, click on the Design tab and make sure the Layout is set to Grid. The Thumbnail Orientation is up to you, but if you are going to be using square images like my demo, the orientation is irrelevant.

Then use the slider to set the opacity for both the Zoom Icon Colour and Hover Overlay Colour to zero. We want to use the overlay functionality for our gallery so our images still open in a lightbox, but by setting the opacity to zero, we won’t actually see it and can therefore style our text hover effect any way we choose with CSS.

You can then scroll down and choose your font, colour, font size etc. settings for the title and caption text.

Finally, click on the Advanced tab and give the module a CSS Class of ds-hover-gallery then Save & Exit.

Ok, that’s our prep done. Time for the method.

Method

Now we need to add in our code. We will start with our JavaScript.

Add the following code in Divi > Theme Options > Integration > Add code to the < head > of your blog.

What we are doing here is wrapping the title and caption elements in a div element called ds-gallery-text to act as a container, so we can position and style them as one rather than two separate elements. This makes controlling their position a whole lot easier for you. We have also wrapped this in an Ajax function so it works if you are using pagination on your gallery module (which now uses Ajax to load more images without reloading the page).

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

Next, and this is optional, add the following to functions.php in your child theme.

Here we are redefining the size of the images Divi uses for the gallery thumbnails. Using the same value for both the height and the width will obviously result in a square thumbnail, but you can change the 400 values to whatever you want, just be sure not to make them too large or it will increase the page load time. Have a play with the values, start low and if your thumbnails are looking blurry, just take the value up a bit until you are happy.

function ds_gallery_thumbnail_height($height) {
return '400';
}
add_filter( 'et_pb_gallery_image_height', 'ds_gallery_thumbnail_height' );

function ds_gallery_thumbnail_width($width) {
return '400';
}
add_filter( 'et_pb_gallery_image_width', 'ds_gallery_thumbnail_width' );

Now for the CSS.

Firstly, we relatively position the gallery items so that our hover effects stay bound to their corresponding images.

.ds-hover-gallery .et_pb_gallery_item {
    position: relative;
}

Then we remove the margin from the title, so that when we position it there isn’t any extra space we don’t want. We also give the Divi default overlay a z-index of 1, this is so it sits on top of our title and caption, which is what allows the image to still open in a lightbox, but as we set the opacity of the overlay to zero in the module settings, we won’t see it.

.ds-hover-gallery .et_pb_gallery_title {
    margin: 0 !important;
}

.ds-hover-gallery .et_overlay {
    z-index: 1;
}

And finally the styling for our new overlay containing our title and caption.

First we absolutely position the new ds-gallery-text div we created with our JS snippet and give it top, left, right and bottom values of zero, this will make our container completely cover our image.

Then we add a little padding, I have chosen 20px but you can change this value.

Next we set the container to display: flex;, this allows us to vertically position the text with justify-content. The value of center will have your text sit in the middle of the image, but you can change this to flex-start if you want it at the top and flex-end if you want it at the bottom.

We add a background colour using RGBA so we can have some opacity and the image will show through, here I have set the colour to white with 80% opacity.

We then set the opacity for the actual container to zero, this is so it doesn’t show up until we hover.

The last property gives us the transition between hiding and displaying our text, this will fade the overlay in and out over half a second. You can increase or decrease this value to make that transition slower or faster.

The final declaration simply sets the opacity of our new text overlay to 1, which means it will display when the gallery item is hovered over.

.ds-hover-gallery .ds-gallery-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(255, 255, 255, .8);
    opacity: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.ds-hover-gallery .et_pb_gallery_item:hover .ds-gallery-text {
    opacity: 1;
}

If you want to have the text display by default and hide on hover, simply switch the opacity values in this last section of CSS so the first one is set to 1 and the last one is set to 0.

So that is all the CSS you need, obviously you can add more if you want additonal styling but this should serve as a good foundation to get you started.

Copy the all the CSS from the toggle below complete with comments and paste into your child theme stylesheet or Divi > Theme Options > Custom CSS.

And that’s it. It’s pretty simple to create and who knows, maybe one day soon it will be available as an option in the actual module settings

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X