KP-C

Kevin Powell - Community•3y ago•

3 replies

bluetomato

Overflow:scroll while keeping a specific child element visible outside?

Hi all. Usually I can strumble around and find a solution, but I'm stuck here.

I have a vertically scrollable container that contains a bunch of clickable cards. I have added a

--zoom

--zoom

property so that the cards can grow on hover. However, when hovering over the top row of cards, the top of it gets clipped (as expected). Ideally I'd like to keep the scroll behaviour, while keeping all of the hovered over card visible on the top. Pulling it out of the flow is a hassle to get looking right, and it breaks being able to scroll while hovering over it. Is there any way to achieve what I'm after?

This is me modifying an existing app, so I really want to keep it CSS only if at all possible.

(I'm also open to other good UX solutions; I just got sick of having a massive wall of giant cards to scroll through)