Jump to content

How can I set the poster image to scroll on overflow text?

Go to solution Solved by Beyondspace,

Recommended Posts

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.

OverflowExample.thumb.png.3eef78883580bb66dc7370984025c599.png

 

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:

  1. How can I properly set this up so that any overflow text can be scrollable?
  2. How can I set the text to be aligned to the top of the card wrapper (currently it aligned to centre)
  3. 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
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.

OverflowExample.thumb.png.3eef78883580bb66dc7370984025c599.png

 

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:

  1. How can I properly set this up so that any overflow text can be scrollable?
  2. How can I set the text to be aligned to the top of the card wrapper (currently it aligned to centre)
  3. 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;
}

image.png.d884acd9979cb09a8c631e7aaf46c331.png

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
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;
}

image.png.d884acd9979cb09a8c631e7aaf46c331.png

 

Perfect solution, works great. Thank you so much! Much appreciated.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.