Transitions

Right now our movie cards respond instantly when hovered. With transitions, changes animate over a fraction of a second, making the whole page feel polished and alive.

The transition Property

Add transition to an element, and CSS will animate any property change instead of jumping to the new value instantly.

.movie-card {
  transition: transform 0.3s ease;
}

This means: "When transform changes, animate it over 0.3 seconds using the ease timing curve."

The syntax:

transition: [property] [duration] [timing-function];

• property — which CSS property to animate (transform, opacity, background-color, or all)
• duration — how long the animation takes (0.3s, 500ms)
• timing-function — the speed curve (ease, linear, ease-in, ease-out)

transform: scale()

transform: scale() makes an element larger or smaller. A value of 1 is normal. 1.1 is 10% bigger. 0.9 is 10% smaller.

.movie-card:hover {
  transform: scale(1.05);
}

Combined with a transition, this creates the Netflix card hover effect — the card grows slightly when you hover over it.

opacity Transitions

opacity controls how see-through an element is. Transitioning it creates smooth fade effects.

.movie-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.movie-card:hover .movie-overlay {
  opacity: 1;
}

On hover, the overlay fades in. When the cursor moves away, it fades out.

Combining Transitions

You can animate multiple properties at once by separating them with commas, or using all:

.movie-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.movie-card:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
}