CSS Opacity

.movie-card {
  opacity: 1;
}

.movie-card:hover {
  opacity: 0.75;
}

.movie-card.faded {
  opacity: 0.5;
}

Let me ask you something.

Have you ever hovered over a button or an image on a website and it slightly faded? Or seen a dark overlay sitting on top of a background image making the text easier to read? Or a disabled button that looked washed out and unclickable?

All of that is opacity. It is a simple property but it creates a surprising amount of visual polish when used well.

What is Opacity

Opacity controls how transparent an element is. It goes from 0 to 1.

0 means completely invisible. You cannot see it at all.

0.5 means half transparent. The element and whatever is behind it are equally visible.

1 means fully solid. No transparency at all. This is the default.

The first card is fully visible. The second is half transparent. The third is barely there. You can see the gray background showing through both faded cards.

Here is what is happening.

opacity: 0.5 — the second card is 50 percent transparent. The card image and everything inside it including any text or badges becomes semi transparent together.

opacity: 0.2 — the third card is 80 percent transparent. Just a faint ghost of the image remains.

This is an important point. Opacity applies to the entire element and everything inside it. If you have a card with an image, a badge, and some text and you set opacity: 0.5 on the card everything inside fades together. There is no way to make just the background fade while keeping the text fully solid using opacity alone. For that you use rgba which we already covered in the colors lesson.

Opacity on Hover

Opacity becomes really powerful when combined with hover states. This is how you create that smooth fade effect when someone hovers over a movie card or a button.

Hover over any card and it fades slightly. Move your mouse away and it comes back to full opacity.

That :hover is a pseudo-class — we will cover those in detail in the next lesson. For now just know that it applies styles when the user hovers over the element.

Right now the fade happens instantly which feels a bit abrupt. We will fix that with transitions in a later lesson. But even without the smooth animation the effect is already working.

Opacity vs visibility: hidden

There are two ways to make an element invisible in CSS. opacity: 0 and visibility: hidden. They look the same visually but behave very differently.

The second card is invisible but its space is still there. The first and third cards stay in their positions with a gap between them where the invisible card lives.

Now try visibility: hidden instead.

.movie-card.invisible-opacity {
  visibility: hidden;
}

Looks exactly the same. The card is invisible and the space is still reserved.

The real difference shows up with transitions. Opacity can be animated smoothly from 0 to 1. Visibility cannot — it just snaps on and off with no smooth transition possible.

This is why opacity: 0 is almost always used for fade in and fade out animations instead of visibility: hidden. We will use this when we get to transitions.

And remember display: none which we covered earlier — that one removes the element from the layout entirely so no space is reserved at all. Three different tools for three different situations.

Building the Netflix Clone

Let us add some opacity effects to our Netflix clone. Movie cards will fade slightly on hover giving users clear visual feedback that the cards are interactive.

Here is what is happening.

opacity: 1 on movie-card — every card starts fully visible. Writing this explicitly is good practice even though 1 is the default. It makes the intention clear and sets us up for the hover state.

opacity: 0.75 on movie-card:hover — when the user hovers over any card it fades to 75 percent opacity. Just enough to signal that something is happening without making the card disappear. It snaps back to full opacity when the mouse moves away.

Right now the fade happens instantly. In a few lessons when we cover transitions we will add a smooth animation to this so it fades in and out gracefully instead of snapping. That one addition will make the cards feel dramatically more polished.