otohmatthew Posted March 13, 2021 Share Posted March 13, 2021 Site URL: https://portfolio-test-site.squarespace.com/ Hi everyone, Hope you're all doing well. Have spent the last two hours trying to find a solution to my problem, so I would be grateful if someone here could help me out, please. I have created a website here: https://portfolio-test-site.squarespace.com/ Password: Hello123 Currently, I'm trying to build a team page that displays a description when the image is hovered. To achieve this, I am using a Poster Image Block and the following CSS: .design-layout-poster:hover .image-card-wrapper { visibility: visible; opacity: 0.98; background-color: #F9D36E; } .design-layout-poster .image-card-wrapper { visibility: hidden; opacity: 0; transition-duration: 0.25s; } This works successfully. However, sometimes the description is quite long and the text will overflow outside of the image bounds on certain viewports. See below image of the issue. I understand this is a pretty extreme case, and text will rarely be this lengthy, however, I think it illustrates the problem best. To remedy this, I've tried to set overflow to scroll using the following: .design-layout-poster .image-card-wrapper { overflow-y: scroll!important; } Which successfully adds a scroll bar, but the scrollbar itself is not scrollable. So I have three questions: How can I properly set this up so that any overflow text can be scrollable? How can I set the text to be aligned to the top of the card wrapper (currently it aligned to centre) And is it also possible to hide the scrollbar (or at least the additional white box that it creates?) Any help would be greatly appreciated! Thanks Matthew Link to comment
Solution Beyondspace Posted March 13, 2021 Solution Share Posted March 13, 2021 1 hour ago, otohmatthew said: Site URL: https://portfolio-test-site.squarespace.com/ Hi everyone, Hope you're all doing well. Have spent the last two hours trying to find a solution to my problem, so I would be grateful if someone here could help me out, please. I have created a website here: https://portfolio-test-site.squarespace.com/ Password: Hello123 Currently, I'm trying to build a team page that displays a description when the image is hovered. To achieve this, I am using a Poster Image Block and the following CSS: .design-layout-poster:hover .image-card-wrapper { visibility: visible; opacity: 0.98; background-color: #F9D36E; } .design-layout-poster .image-card-wrapper { visibility: hidden; opacity: 0; transition-duration: 0.25s; } This works successfully. However, sometimes the description is quite long and the text will overflow outside of the image bounds on certain viewports. See below image of the issue. I understand this is a pretty extreme case, and text will rarely be this lengthy, however, I think it illustrates the problem best. To remedy this, I've tried to set overflow to scroll using the following: .design-layout-poster .image-card-wrapper { overflow-y: scroll!important; } Which successfully adds a scroll bar, but the scrollbar itself is not scrollable. So I have three questions: How can I properly set this up so that any overflow text can be scrollable? How can I set the text to be aligned to the top of the card wrapper (currently it aligned to centre) And is it also possible to hide the scrollbar (or at least the additional white box that it creates?) Any help would be greatly appreciated! Thanks Matthew try this .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper { overflow-y: auto !important; } .sqs-block-image .design-layout-poster .image-card-wrapper { align-items: flex-start !important; pointer-events: auto !important; padding-top: 1em; padding-bottom: 1em; } otohmatthew and tuanphan 1 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
otohmatthew Posted March 13, 2021 Author Share Posted March 13, 2021 2 hours ago, bangank36 said: try this .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-card-wrapper { overflow-y: auto !important; } .sqs-block-image .design-layout-poster .image-card-wrapper { align-items: flex-start !important; pointer-events: auto !important; padding-top: 1em; padding-bottom: 1em; } Perfect solution, works great. Thank you so much! Much appreciated. 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