Gallery hover effect

Hi, I have used the following custom code to give my gallery a hover effect. I have changed the text captions so they are clickable as links.

.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 */
}

However, it is only the text that is clickable. 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 redirects to the link?

Edit this code

.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;
}

to this

.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 */
}

If it doesn't work, can you share link to page where you added gallery? We can check easier

I used this code above, and it's working so far, but now I need to add padding or change the max width so it doesn't go all the way to the edge. 

Here's my site: https://glockenspiel-mandolin-ltjl.squarespace.com/config/design

pw: peanut

I'd also like to add buttons below the captions if possible...

On 10/20/2021 at 2:25 AM, margmorg said:

I used this code above, and it's working so far, but now I need to add padding or change the max width so it doesn't go all the way to the edge. 

Here's my site: https://glockenspiel-mandolin-ltjl.squarespace.com/config/design

pw: peanut

 

I'd also like to add buttons below the captions if possible...

Hi,

Where is gallery?

@tuanphan I've used this code as well and I'm wondering if there is a way to change the hover delay? It takes a good couple of seconds mousing over to see the hover effect.

On 2/24/2023 at 2:38 AM, recoveringlazyholic said:

@tuanphan I've used this code as well and I'm wondering if there is a way to change the hover delay? It takes a good couple of seconds mousing over to see the hover effect.

add transition to the code

.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 */
transition: all 0.1s !important;
}

Thank you!