A Pure-CSS Take on Netflix’s Expanding Preview Row

Netflix’s browse UI has a signature hover interaction: a title expands while its neighbors shift aside to make room, keeping everything centered and unoverlapped. It feels like it needs JavaScript, but you can actually pull it off with plain CSS — no dependencies, no event listeners. Here’s how.

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

What We’re Building

Before touching the code, the interaction boils down to three rules:

  1. The hovered card grows but holds its aspect ratio.
  2. That expansion pushes the surrounding cards outward; they don’t shrink or overlap.
  3. All cards stay vertically aligned throughout the animation.

Setting Up the Row

Start with a standard horizontal layout: a .container flex row filled with .item elements, each holding an image inside an anchor. Make each .item flexible so they share the row’s width equally.

Hovering Without Shrinking the Neighbors

A first instinct might be to animate the item’s width on hover. Don’t. Changing width reflows the document, which would compress the siblings — and it’s also a known performance drain. Instead, use the transform property with scale(). Transforms don’t affect document flow, so the hovered card scales up without forcing its siblings to resize.

Pushing the Siblings Out

The harder part is the outward shift. For cards to the right of the hovered one, the general sibling combinator (~) selects them cleanly. Applying a translateX() moves them over.

Here’s the key math: if the hovered item scales to 150%, the extra width it occupies is 50% of its original size. Half of that — 25% — is the right amount to translate the siblings so they sit flush against the expanded edges.

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

The general sibling combinator only works forward in the document, so it leaves the cards on the left untouched. The fix is to reverse the logic with a parent-centric rule:

  • Hover the .container itself, and shift all items left via a negative translateX().
  • Then, use the general sibling combinator to override that for items after the hovered one, pushing them right instead.
  • Finally, make sure the hovered item itself isn’t translated — it stays centered and just scales.

This approach assumes a left-to-right writing mode. For a right-to-left layout, simply flip the directions: translate everything right on container hover, and use the sibling selector to pull the following items back left.

A Note on Accessibility

Demonstrations all too often ignore the keyboard. Adding :focus and :focus-within pseudo-classes alongside the :hover rules makes the same expansion and shift work for keyboard focus, which is a worthwhile enhancement even if the original Netflix UI doesn’t include it.

This isn’t to claim CSS is always the best tool — JavaScript event handlers might make the logic easier to maintain. But this pure-CSS approach shows how far transforms and sibling combinators can go with a little creative layering.