Gallery Hover with Caption and Clickable Link

To achieve gallery hover with caption and clickable link, you can follow these steps.

#1. Hover on Gallery and click Edit Section

#2. Enable Caption

#3. Hover on Gallery > Click Edit Gallery Images

#4. Type some captions and URL

We will have a result like this (here I use Gallery Grid, you can do similar with Gallery Strips or Gallery Masonry)

#5.1. If you want to make Gallery with Hover Caption + Clickable for All Galleries, you can use this code to Custom CSS box

figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"] a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"] a:after {
    opacity: 0.75;
}
figcaption {
    padding: 0 !important;
}

Result:

#5.2. If you wan to apply this for Specific Gallery, you need to find Gallery Section ID. Use below Tool.

In my example, we have:

section[data-section-id="66b35593870615758574885e"]

Next, use this CSS code

section[data-section-id="66b35593870615758574885e"] {
figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"] a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"] a:after {
    opacity: 0.75;
}
figcaption {
    padding: 0 !important;
}}

#5.3. If you want to apply this for all Galleries on a specific page You can edit page > Add a block > Choose Code

Then paste this code into Code Block

<style>
figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"] a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"] a:after {
    opacity: 0.75;
}
figcaption {
    padding: 0 !important;
}
</style>

#5.4. If you want to apply this for all Galleries on Blog Posts, you can use this code to Custom CSS box

body[class*="type-blog"].view-item {
figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"] a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"] a:after {
    opacity: 0.75;
}
figcaption {
    padding: 0 !important;
}}

#6. If you want to change the Overlay Color, you can adjust this line

If you want to change Caption text size/color, you can add color, font-size attribute to this code

it should be

.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
color: #f1f !important;
font-size: 40px !important;
}