Hi all.
I have added some custom CSS so that hovering over images in a Grid: simple gallery will make captions and a colour overlay appear.
The effect works well. However, now the images are no longer clickable/linkable.
As other users have noted, it seems like something in the code is disabling the normal spotlight/link function for the images.
Below is the code I am using.
Thanks for your help!
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(32,28,105,0.9); /* overlay color */
height: 100%;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center .vertically */
justify-content: center; /* center
.horizontally */
}
.gallery-caption-content {
font-size: 1rem :important; /* caption
font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms
}
p.gallery-caption-content {
font-family: Jeff-Script!important;
}
figcaption.gallery-caption.gallery-caption-grid-simple {
p {
font-size: 130%;
font-weight: 500;
}
}
figcaption.gallery-caption.gallery-caption-grid-simple {
position: absolute;
text-align: center;
}
