jimmydisplayname

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!!

@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!

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}

Hi there. Wondering if there is any CSS that can be inserted to achieve this effect? I inserted some CSS code to make it so hovering over images in my gallery reveals captions. But, now clicking on the images does nothing. I can't have them link to anything and spotlight doesn't work at all! Do you know of a simple fix for this only using CSS? Thanks.