Opacity

Under Oscar's card, we've added a smaller one for Bella, a cat who has already found a new home. Visitors like to see happy endings like this, but the card shouldn't draw attention away from the cats who are still waiting. A common way to say "this one is done" is to fade the card out.

In the CSS course, you learned about the opacity property, and in Tailwind, it's the opacity-* classes. The number is a percentage: opacity-60 is opacity: 60%, the same as 0.6. opacity-0 makes an element invisible (it still takes up its space, though), and opacity-100 is fully visible, the default. Any number from 0 to 100 works, such as opacity-25 or opacity-80.

Remember the difference from a color with a slash, such as bg-orange-500/50, from the lesson on colors and text: the slash makes only that one color see-through. opacity fades the whole element with everything in it: its text, background, border, pictures and the elements inside it.

bg-orange-500/50

bg-orange-500 opacity-50

Because the elements inside fade along with their parent, a child can't be less transparent than its parent: opacity-100 on the heading of a faded card doesn't bring it back. If something inside should stay clear, fade only the other parts.