Pementa Posted June 11 Share Posted June 11 Hi! I've added CSS code to have captions appear while hovering over each gallery image, but when I add links a nasty overlay appears. Can someone help me get rid of it? Here's some of the code: /* caption from base to overlay in gallery - Desktop */ @media screen and (min-width:960px) { figure.gallery-grid-item { position: relative; } /* gallery caption font */ .gallery-caption { position: static; color: #38757D !important; } p.gallery-caption-content { font-size: 200% !important; overflow: hidden; color: #38757D; font-family: 'DM Serif Display' !important; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: right; align-items: flex-end; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #38757d; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } } /* caption from base to overlay in gallery - Mobile */ @media screen and (max-width:959px) { figure.gallery-grid-item { position: relative; } /* gallery caption font */ .gallery-caption { position: static; color: #38757D !important; } p.gallery-caption-content { font-size: 100% !important; overflow: hidden; color: #38757D; font-family: 'DM Serif Display' !important; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: right; align-items: flex-end; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #38757d; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } } Link to comment
Beyondspace Posted June 11 Share Posted June 11 2 hours ago, Pementa said: Hi! I've added CSS code to have captions appear while hovering over each gallery image, but when I add links a nasty overlay appears. Can someone help me get rid of it? Here's some of the code: /* caption from base to overlay in gallery - Desktop */ @media screen and (min-width:960px) { figure.gallery-grid-item { position: relative; } /* gallery caption font */ .gallery-caption { position: static; color: #38757D !important; } p.gallery-caption-content { font-size: 200% !important; overflow: hidden; color: #38757D; font-family: 'DM Serif Display' !important; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: right; align-items: flex-end; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #38757d; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } } /* caption from base to overlay in gallery - Mobile */ @media screen and (max-width:959px) { figure.gallery-grid-item { position: relative; } /* gallery caption font */ .gallery-caption { position: static; color: #38757D !important; } p.gallery-caption-content { font-size: 100% !important; overflow: hidden; color: #38757D; font-family: 'DM Serif Display' !important; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: right; align-items: flex-end; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #38757d; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } } Can you share your URL so I can check it? Pementa 1 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! Link to comment
Pementa Posted June 11 Author Share Posted June 11 https://www.pementa.com/sol Beyondspace 1 Link to comment
Solution Lesum Posted June 11 Solution Share Posted June 11 @Pementa Hi! Remove this part from your existing code: /* overlay */ .gallery-grid-item-wrapper a:after { background: #38757d; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } Pementa 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Beyondspace Posted June 11 Share Posted June 11 51 minutes ago, Pementa said: https://www.pementa.com/sol This code sets a background color on your items. You can try removing them hope it makes sense Pementa 1 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! Link to comment
Pementa Posted June 11 Author Share Posted June 11 23 minutes ago, Lesum said: @Pementa Hi! Remove this part from your existing code: /* overlay */ .gallery-grid-item-wrapper a:after { background: #38757d; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } Thank you, worked like a charm. Link to comment
Pementa Posted June 11 Author Share Posted June 11 16 minutes ago, Beyondspace said: This code sets a background color on your items. You can try removing them hope it makes sense Thank you very much, this explains it. Beyondspace 1 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