hpeck Posted February 11, 2022 Share Posted February 11, 2022 (edited) Have cobbled together some CSS which is working fine; just can't get the hover text visible despite changing the hex code. You can really faintly see the overlay text, how do I get it to grey / black? .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: absolute; pointer-events: none !important; } .image-caption-wrapper { max-height: 100% !important; } .image-caption-wrapper { background: rgba(255,255,255,0.7) !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-0%,-0%); -ms-transform: translate(-0%,-0%); transform: translate(-50%,-50%); } .image-caption p { color: #ea4e4c !important; font-size: 20px !important; font-weight: semibold !important; text-transform: lowercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 0 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: ; opacity: .1; } Edited February 11, 2022 by hpeck clearer title Link to comment
Beyondspace Posted February 11, 2022 Share Posted February 11, 2022 35 minutes ago, hpeck said: Have cobbled together some CSS which is working fine; just can't get the hover text visible despite changing the hex code. You can really faintly see the overlay text, how do I get it to grey / black? .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: absolute; pointer-events: none !important; } .image-caption-wrapper { max-height: 100% !important; } .image-caption-wrapper { background: rgba(255,255,255,0.7) !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-0%,-0%); -ms-transform: translate(-0%,-0%); transform: translate(-50%,-50%); } .image-caption p { color: #ea4e4c !important; font-size: 20px !important; font-weight: semibold !important; text-transform: lowercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 0 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: ; opacity: .1; } Can you share your site with the protected password so we can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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
hpeck Posted February 11, 2022 Author Share Posted February 11, 2022 50 minutes ago, bangank36 said: Can you share your site with the protected password so we can take a look? Sure; https://pelican-fuchsia-f6eb.squarespace.com WEBDESIGN2022 Link to comment
hpeck Posted February 11, 2022 Author Share Posted February 11, 2022 Domain is changed now to hannahpeckillustration.co.uk Link to comment
Solution Beyondspace Posted February 12, 2022 Solution Share Posted February 12, 2022 9 hours ago, hpeck said: Domain is changed now to hannahpeckillustration.co.uk Try adding to Home > Design > Custom Css #collection-6204d222e342e93093702da4 .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper p { color: grey ; } Let me know how it works on your site Support me by pressing 👍 if this useful for you BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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
Beyondspace Posted February 12, 2022 Share Posted February 12, 2022 My testing hpeck 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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
hpeck Posted February 12, 2022 Author Share Posted February 12, 2022 thank you! super helpful 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