How to add links in a Gallery in the DIVI template and show a title when hovering over it (Hover)

Hello guys,

Today we are going to see how to create a gallery in the Divi template that shows a text when hovering over it and also has a link.

This is useful if we want to create a personalized portfolio, cooking recipes or any other idea that comes to mind.

If you don't have the DIVI template, you can buy here for 69$, or If you are subscribed to the Premium Zone you can download it for free from the members area. you can give sign up for €10/month here

The result will be the following:

To do this we will use the DIVI constructor and the final aspect that the editor must have is the following:

The first step is to configure the row, it is the green section of the previous image, when you click on the three horizontal lines you will see the following screen and you have to leave the options as you see here:

Now we add the gallery module with the following options:

To add the images we have to click on the "Update Gallery" button and choose the images that we are going to add:

Now we have to add in each image the text that we want to appear when hovering in the image.
We are going to add it in the legend field when clicking on each image:

In the example I have added the following link with a title and subtitle:

<a href="https://comohacerunapagina.es"><b>Añade un título</b></br>Subtítulo aquí</a>

We have it almost ready, but in the absence of adding the style sheet it seems that we are very far from the final result:

Now we just have to add the CSS. To do this, we click on the constructor options, as shown in the following image:

We add the css in the following screen:

The CSS you have to add is:

/*---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 we got the result we were looking for 😉