How to break up images from parent element?

HTML-CSS
#1

Hi there,

I am trying to replicate Netflix carousel.
I have the gallery and I am able to scroll through the gallery.
Here the code

The issue I have is that when I hover to scale the images these latters get cropped due to the height of the parent element.
I don’t like the idea to increase the height of the section element because it would ruin the style.

If you check on Netflix once you hover on a show-image, this latter is able to break out its parent.

An alternative would be to remove the “overflow-x: hidden” to the section element but for some reasons (maybe you can help me with this one as well) the scrollTo method in javascript does not work without it.

Finally, I thought that setting overflow-y: visible, positioning the image to relative with z-index would have sorted the issue, but nothing.

Any suggestions please?

#2

How about just a little top/bottom padding on #section1. I know it will increase the height slightly but you really only need something like 8px edit lets say 10px. I don’t think it does anything bad to the layout. You can always lower the bottom margin on the “Continue Watching” h2 to close the gap between the elements a bit again.

#3

If I want to try to replicate netflix, change the height is not enough. What you suggest is done on Disney Plus. I am wondering if Netflix uses javascript or something more.

Any ideas?

#4

I don’t know what their carousel looks like so I can’t comment on it. But I’m not sure I see the issue with adding 10px top/bottom padding.

If you use JS for the hover effect you can disable the overflow on the container on hover. However, you still need to create space for the elements, otherwise, you just get scroll bars showing up.