jimmydisplayname Posted December 8, 2020 Posted December 8, 2020 (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 December 8, 2020 by jimmydisplayname Beyondspace 1
Beyondspace Posted December 9, 2020 Posted December 9, 2020 .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!
jimmydisplayname Posted December 9, 2020 Author Posted December 9, 2020 @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!
Beyondspace Posted December 9, 2020 Posted December 9, 2020 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 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!
jimmydisplayname Posted December 9, 2020 Author Posted December 9, 2020 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!! Beyondspace 1
Beyondspace Posted December 9, 2020 Posted December 9, 2020 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!
Rumz Posted July 15, 2023 Posted July 15, 2023 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!
tuanphan Posted July 19, 2023 Posted July 19, 2023 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment