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 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)
3 Replies
you could try and see if it works if you put a wrapper around that overflow container with a position of relative.
and on the image:hover, set the image position to absolute
otherwise, i can't see a css-only solution
Dang, alright. I was afraid this would be tricky using just CSS.
I didn't have any luck with your suggestion, so for now I'll just settle for an expanding no-scroll container instead.
Thanks for the help!
no problem, good luck