Making Gallery Images Clickable / Linkable After Hover Effects Have Been Added With CSS

Site URL: http://www.danajamesart.com

Hi there. I've seen a few posts related to this, but no clear solution. At least not a solution that has worked for me yet. I have added some custom CSS so that hovering over images in a gallery (masonry gallery in my case) will make captions and a color overlay appear. The effect is perfect. However, now spotlight will not work at all and I cannot make the images clickable/linkable.  Something in the code must be disabling the normal spotlight/link function for the images. Spotlight is definitely turned on in my gallery and I have tried adding links to multiple images. Nothing is working. Below is the code I am using. Please note, I am trying to only use CSS because I do not want to have to upgrade the account to use javascript. Thank you for your help!

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    background-color: white;
    height: 100%;
}

.gallery-masonry-item:hover .gallery-caption {
    opacity: .75;
    transition: all .3s ease;
}
.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

.gallery-caption p{color:red!important}
.gallery-caption p{font-size:1.25rem!important}

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    padding: 0;
}
.gallery-masonry-item-wrapper a:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #fff;
  opacity: 0;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: .75;
    transition: all .3s ease;
}
.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

.gallery-caption p{color:red!important}
.gallery-caption p{font-size:1.25rem!important}

This workaround will only display the caption partial so you still can click on the image

@bangank36 Thank you for your help. I put your code in exactly as you had it, but unfortunately the captions did not show up at all. The links/spotlight worked and the images would change color when I hovered over them, which is great, but I could not see the captions at all. Do you have a solution? Thank you!

21 minutes ago, jimmydisplayname said:

@bangank36 Thank you for your help. I put your code in exactly as you had it, but unfortunately the captions did not show up at all. The links/spotlight worked and the images would change color when I hovered over them, which is great, but I could not see the captions at all. Do you have a solution? Thank you!

I can see, what wrong

Hi @bangank36  Sorry if I missed part of your response. Looks like you said you can see what's wrong, but I didn't see any further comments. I reverted the code back to the original code, because the captions disappeared when I used the code you sent, but the images did work for spotlight and links. I want the captions to appear when I hover over the images, but I also want to be able click the images and have them go to spotlight or a link. Can you help? Thanks!!

26 minutes ago, jimmydisplayname said:

Hi @bangank36  Sorry if I missed part of your response. Looks like you said you can see what's wrong, but I didn't see any further comments. I reverted the code back to the original code, because the captions disappeared when I used the code you sent, but the images did work for spotlight and links. I want the captions to appear when I hover over the images, but I also want to be able click the images and have them go to spotlight or a link. Can you help? Thanks!!

Please try again, replace lastest code with your current code, mistake on me

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    padding: 0;
}
.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
}
.gallery-masonry-item-wrapper a:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #fff;
  opacity: 0;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: .75;
    transition: all .3s ease;
}
.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

.gallery-caption p{color:red!important}
.gallery-caption p{font-size:1.25rem!important}

Hi there,

I'm having the exact same issue. Know it's been a while, but did you figure out the solution?

Any help would be much appreciated!

On 7/15/2023 at 10:07 PM, Rumz said:

Hi there,

I'm having the exact same issue. Know it's been a while, but did you figure out the solution?

Any help would be much appreciated!

If you share link to page where you have problem, we can check easier