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

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:

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