How to add a hyperlink to the gallery caption overlay/hover effect (whole image)?

Hi, I have used the following css to give my gallery a hover effect.

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 20px !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-strips-item {
position: relative;
}
.gallery-strips-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-strips-simple {
transition-delay: 0ms;
}

.gallery-caption a {
color: white; /* color of the caption text */
}

I have changed the text captions so they are clickable as links. However, only the text itself is clickable, not the whole image. You have to specifically hove over the text to click the link. Is there a possibility to change the code so the whole image is clickable and opens the link?

Hi. Try adding pointer-events

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none; /* enable clickable */
}