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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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