spongebob-smc Posted January 21, 2021 Share Posted January 21, 2021 Site URL: https://mouse-trout-epjy.squarespace.com/members Hello, I have a gallery grid with an overlay on hover to display the caption on each image. However, each image also needs to link to a page. It seems that when I add an overlay it disables the clickthrough link on the image. Anyone got any ideas on how to solve this? https://mouse-trout-epjy.squarespace.com/members site password: spong123 This is my code: .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); height: 100%; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } .gallery-caption-content { font-size: 1rem !important; color: white; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } Link to comment
spongebob-smc Posted January 21, 2021 Author Share Posted January 21, 2021 Found a fix: .gallery-caption{ pointer-events: none; } Inscape 1 Link to comment
mccaslin Posted August 23, 2022 Share Posted August 23, 2022 THANK YOU! That solved it for me and I was tearing my hair out over this one. Inscape 1 Link to comment
Inscape Posted January 5 Share Posted January 5 On 1/21/2021 at 10:51 AM, spongebob-smc said: Found a fix: .gallery-caption{ pointer-events: none; } Yep, this does it! M Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment