How to Re-Create a Nifty Netflix Animation in CSS

The design for Netflix’s browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview.

One unique characteristic of the UI is its hover behavior. When a show preview expands on hover, the cards next to it are pushed outward so that they don’t overlap. 

Like this:

It’s like Bill Murray and Brad Pitt are fighting for the spotlight.

We can do this in CSS! No JavaScript. No dependencies. Plain CSS. But before getting into any code, here’s exactly what we want to do:

1. The card that is hovered over should expand while keeping its aspect ratio.
2. When a card is hovered, the other cards should not change size and move outwards so that they don’t overlap one another.
3. All the cards should remain vertically centered with one another.

Sound good? Now let’s get into the code.

HTML and flexible elements

Let’s set up a row of images that represents Netflix’s video previews. That includes:

• A  .container parent element with several .item elements inside
• Each .item element consisting of an image wrapped in an anchor tag
• Turning .container into a flex container that aligns the items in a row
• Setting the flex behavior for the .item class so they take up equal space in the row

Expanding an item on hover

Our next step is getting an item to expand when it is hovered. We could do this by animating the element’s width, but that would affect the flow of the document and cause the hovered item’s siblings to shrink – plus, animating the width property is known to be poor for performance in some cases.

To avoid squeezing the sibling of the hovered item, we are going to animate the transform property — specifically, its scale() function — instead. This won’t affect document flow the same way width does.

Moving siblings outward

Getting the siblings of a hovered item to move away from the hovered item is the tricky part of this whole thing. One CSS feature we have at our disposal is the general sibling combinator. This lets us select all of the sibling items that are positioned after the hovered item.

We’ll turn to the transform property’s translateX() function to move things around. Again, animating transform is much nicer than other properties that impact document flow, like margins and padding.

Since we’ve set an item to scale up 150% on hover, the translation should be set to 25%. That’s half of the additional space that is being occupied by the hovered item.

.item:hover ~ .item {
  transform: translateX(25%);
}

That handles moving things to the right, but how can we translate the items on the left? Since the general sibling combinator only applies to siblings positioned after a given selector (no going “backwards”), we’ll need another approach.

One way is to add an additional hover rule on the parent container itself. Here is the plan:

• When hovering the parent container, shift all the items inside that container to the left.
• Use the general sibling combinator to make the items positioned after the hovered item move to the right.
• Get super specific so a hovered item isn’t translated like the rest of the items.

We’re making a big assumption that your document uses a left-to-right writing mode. If you want to use this effect in a right-to-left context, you will need to set all items inside the hovered outer container to move right and use the general sibling combinator to move all selected items left.

Demo time!

One little thing to note: this final version is using :focus and :focus-within pseudo-classes to support keyboard navigation. The Netflix example isn’t using it, but I think that’s a nice touch for accessibility.

---

There we have it! Yes, we could have used JavaScript event listeners instead of CSS hover rules., and that could possibly be better for maintainability and readability. But it’s sometimes fun to see just how far CSS can take us!

The post How to Re-Create a Nifty Netflix Animation in CSS appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2wl4ag4
via IFTTT