How to Re-Create a Nifty Netflix Animation in CSS

The design of Netflix browsing pages has maintained a high degree of consistency over the years. One of the main components is the preview slider, which allows users to scroll through content and hover over the project to view the preview.

One unique feature of this UI is its hover behavior. When the show preview expands on hover, the card next to it pushes outwards to avoid overlapping.

Like this:

We can achieve this effect in CSS! No JavaScript required, no dependencies required, pure CSS can be done. But before entering the code, let's clarify what we want to achieve:

1. A hovering card should expand while maintaining its aspect ratio.
2. When one card hovers, the other cards should not change the size, but move outwards to avoid overlapping with each other.
3. All cards should be centered vertically with each other.

sounds good? Now let's go to the code section.

HTML and elastic elements

Let's set a line of images to represent the video preview of Netflix. This includes:

• A .containerparent element containing multiple .item elements
• Each .item element contains an image wrapped with an anchor tag
• Convert .container to a flex container to align items in a row
• Set the flex behavior of the .item class so that they occupy equal space in the row

Expand the item while hovering

Our next step is to have the project unfold on hover. We can do this by the width of the animation element, but this can affect the flow of the document and cause the sibling elements of the hovering item to shrink - and in some cases, the animation width attributes perform poorly.

To avoid squeezing sibling elements of a hover project, we will animate the transform property (especially its scale() function). This does not affect the document flow as much as the width.

Move the brother elements outward

Keeping the hover project sibling elements away from the hover project is the trickiest part of the process. One of the CSS features we can use is the universal sibling combinator. This allows us to select all sibling projects that are located behind the hover project.

We will turn to transform property's translateX() function to move elements. Likewise, animation of transform is much better than other properties that affect the document flow, such as margins and padding.

Since we have set the item to zoom in 150% on hover, the pan should be set to 25%. This is half the extra space occupied by the hover project.

 <code>.item:hover ~ .item { transform: translateX(25%); }</code>

This handles moving the element to the right, but how do we pan the element to the left? Since the universal sibling combiner is only suitable for sibling elements that are behind a given selector (can't be "backward"), we need another approach.

One way is to add an extra hover rule to the parent container itself. Here are the plans:

• When hovering the parent container, move all items in the parent container to the left.
• Use the Universal Brother Combinator to move the items that are behind the hover items to the right.
• Operation is very specific to ensure that the hover item is not panned like other items.

Let's assume your document is using a left-to-right writing mode. If you want to use this effect in a context from right to left, you need to move all items in the hover outer container to the right and use the universal sibling combiner to move all selected items to the left .

Demo time!

One thing to note is that the final version uses :focus and :focus-within pseudo-classes to support keyboard navigation. The Netflix example doesn't use it, but I think this is a good addition to the accessibility.

That's it! Yes, we can use JavaScript event listeners instead of CSS hover rules, which may be more conducive to maintenance and readability. But sometimes it's also fun to see how far CSS can take us!

The above is the detailed content of How to Re-Create a Nifty Netflix Animation in CSS. For more information, please follow other related articles on the PHP Chinese website!