Opacity

Besides transparent colors, CSS has the opacity property. It makes a whole element see-through, together with everything in it: its text, its background and all the elements inside it. Its value is a number from 0 (invisible) to 1 (fully opaque, the default):

h1 {
	opacity: 0.5;
}

How is it different from a color with an alpha? An alpha affects only the one color we write it in. Compare these two examples. The first has a magenta background with an alpha of 0.5 and white text; the second has a magenta background, white text and opacity: 0.5:

background-color: rgba(255, 0, 229, 0.5)

opacity: 0.5

In the first example, only the background is transparent and the text stays bright white. In the second one, the text has faded together with the background.

So when you want only the background (or only the text) to be see-through, use a color with an alpha. When you want to fade a whole element, use opacity. It is often used for effects with :hover, which you know from the lesson on selectors. We will fade the list of breeds a little, and each breed will light up when you move the mouse pointer over it.