R22: How to Add Links to the Divi Gallery Module and Show Captions on Hover

by | Aug 31, 2016 | Gallery, Hover, Images

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

How to Add Links to the Divi Gallery Module and Show Captions on Hover

Recipe #22 is a modification to the Divi Gallery Module using only CSS and a little HTML: How to add links to the Divi gallery Module and show captions on hover.

In creating this recipe I discovered something I hadn’t realised before, did you know you can add links to the caption field in the media library? I certainly didn’t but that little discovery made creating this effect so much easier and means that now, instead of your gallery images opening in a modal window, you can now link them to any web page you like, which for me really extends the possibilities of this already great Divi module.

You can view the demo here which uses 8 images but you can have as many as you want.

Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!

So let’s get cooking!

ingredients

The Divi Theme from Elegant Themes

Some suitable images sized at 900 x 600px, although any image size should work.

cooking-time

This should take you around 15 minutes max.

preparation

The first thing we need to do is set up our section. So add a new section with a single column and then add the gallery module.

How to Add Links to the Divi Gallery Module and Show Captions on Hover

We are going to make this a fullwidth gallery so open up the row settings and set it to fullwidth with a custom gutter width of 1, then save & exit.

How to Add Links to the Divi Gallery Module and Show Captions on Hover

method

Next we need to set up our gallery with the images, captions and links we want to display. So open up the gallery module, set the layout to grid, set the number of images you want to show (I’m using 8) and make sure show title and caption is set to yes. Then click on update gallery.

How to Add Links to the Divi Gallery Module and Show Captions on Hover

In the media library, upload your images as you normally would and then select the images you want to add to the gallery.

How to Add Links to the Divi Gallery Module and Show Captions on Hover

Next, click on edit gallery, we are going to add our links to the images. Select an image, add a title and alt text for SEO and then add in your link to the page you want the image to open with the text that should display on hover. It should look something like this:

<a href="https://divisoup.com"><b>Add the title here</b></br>Add the subtitle text here</a>

How to Add Links to the Divi Gallery Module and Show Captions on Hover

If you add roughly the same amount of text I have used in the demo then you shouldn’t need to make any adjustments to the CSS but if you use less or more or change the font size you made need to edit it in a few areas but I will show you where in a moment.

Continue working through your gallery images until they all have a link and caption and then click update gallery. Your gallery should now look something like this:

How to Add Links to the Divi Gallery Module and Show Captions on Hover

Time for the CSS!

If this is the only gallery you have on your site or you want to use this effect for all the galleries you have on a site then you can add this CSS to your child theme stylesheet or the Divi options custom CSS box. However, as I have not used a custom class with this recipe (the caption text was a pain to target) if you don’t want the effect applied anywhere else on a site then add it to the page specific custom css box.

How to Add Links to the Divi Gallery Module and Show Captions on Hover

What we are doing with this CSS is:

  • Hiding the title and the default overlay effect
  • Setting the position of the images to absolute so we can then move the caption text up on top of the images
  • Setting the colour of the image overlay and caption text on hover
  • Adding some padding to the caption text so the overlay covers the whole image and makes it all clickable
  • Adding some media queries so it also looks good on smaller devices.

Check the comments in the CSS to see which values you might want to change if you are using more or less text than the demo.

I have added media queries for the most common screen sizes but it is impossible to test for them all so you may want to add some more, that is up to you.

/*---Add Links to the Divi Gallery Module and Show Captions on Hover---*/


/*Hide the image title and default overlay effect*/

.et_pb_gallery_item h3,
.et_overlay {
    display: none;
}


/*Set the position and size of the images and add an extra pixel to get rid of white space between images*/

.et_pb_gallery_grid .et_pb_gallery_image {
    position: absolute;
    width: calc(100% + 1px) !important;
}

.et_pb_gallery_caption {
    margin: 0 !important;
}


/*Set the colour of the caption text*/

.et_pb_gallery_caption a {
    color: #fff;
}


/*Set the font size and case for the title*/

b {
    font-size: 20px;
    text-transform: uppercase;
}


/*Set the position of caption text so it displays on to of the image on hover and add an outline*/

p.et_pb_gallery_caption {
    position: relative;
    background: rgba(0, 0, 0, .5);
    /*This is the colour of the image overlay on hover*/
    border: none;
    outline: 5px solid rgba(255, 255, 255, .5);
    /*This is the colour of the border*/
    outline-offset: -20px;
    /*This moves the border in a little from the edge*/
    text-align: center;
    padding: 25% 5%;
    /*Adjust the first value if using more or less text*/
    cursor: pointer;
    opacity: 0;
    /*Hide the caption until hover*/
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}


/*Show the caption on hover*/

p.et_pb_gallery_caption:hover {
    opacity: 1;
}


/*Media queries: You will need to adjust these values if using more or less text*/

@media only screen and (max-width:1366px) {
    p.et_pb_gallery_caption {
        padding: 23.7% 5%;
        /*Adjust the first value if using more or less text*/
    }
}

@media only screen and (max-width:1280px) {
    p.et_pb_gallery_caption {
        padding: 19% 5%;
        /*Adjust the first value if using more or less text*/
    }
}

@media only screen and (max-width:1024px) {
    p.et_pb_gallery_caption {
        padding: 15% 5%;
        /*Adjust the first value if using more or less text*/
    }
}


/*This media query make the gallery display as two columns rather than three on tablets in portrait*/

@media only screen and (min-width: 768px) and (max-width: 980px) {
    .et_pb_column .et_pb_grid_item:nth-child(2n+1) {
        clear: both !important;
    }
    .et_pb_gutters1 .et_pb_grid_item:nth-child(n) {
        width: 50% !important;
        margin: 0 !important;
        clear: none;
    }
    p.et_pb_gallery_caption {
        padding: 26.5% 5%;
        /*Adjust the first value if using more or less text*/
    }
}

@media only screen and (max-width: 480px) {
    .et_pb_gallery_grid .et_pb_gallery_image {
        width: 100% !important;
        max-width: 100% !important;
    }
    p.et_pb_gallery_caption {
        padding: 24.8% 5%;
        /*Adjust the first value if using more or less text*/
    }
}

@media only screen and (max-width: 320px) {
    .et_pb_gallery_grid .et_pb_gallery_image {
        width: 100% !important;
        max-width: 100% !important;
    }
    p.et_pb_gallery_caption {
        padding: 19.4% 5%;
        /*Adjust the first value if using more or less text*/
    }
}

 

And that’s it. Now when you want to add to your gallery simply update the gallery with the new image and include the link in the caption field.

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

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!