Jump to content

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

Recommended Posts

Posted (edited)

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}

 

Edited by jimmydisplayname
Posted
.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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Posted

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

Posted
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

image.thumb.png.fe7a9e4bbc981fb3043c42fa5de100e7.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Posted

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

Posted
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}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

  • 2 years later...
Posted

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!

Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.