Lesson info

Changing the opacity of an element affects its transparency level, as well as all its children. You can also change the opacity of a color of a specific style property, like a background color or border color. This is useful if you want to apply transparency to a specific style property without affecting its child elements. In this video, we'll show you how to set opacity on an element, and how to use opacity in hover effects.


Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here


Opacity, o-PAY-city, does the pronunciation really matter? Does it bother you that people pronounce pronunciation pro-noun-ciation?

As we already know, we can use RGBA to set the alpha channel (or opacity) of a solid color or any stop inside a gradient. The direct opacity control in the Style panel lets us affect the transparency (directly translated from Latin, this means "see-through-ness") of any element as well as its children.

Here are some link blocks. They all have the same class applied.

Let's select one, and go all the way down to Opacity. We can click and drag, or we can type in a value. Let's say 80%.

What else can we do with opacity? Let's go over to select our Hover state. And on Hover, we can go down to Opacity and set it to 100%. Now on hover, we can see each link block increasing in opacity. But it's a bit abrupt.

Let's add a transition. We'll do this in None — because we can't do this in Hover — and we can go down and add a transition. Just like other style values, we can select Opacity from the dropdown. It also happens to be the default transition so pressing the dropdown is kind of unnecessary.

Let's hover over, and we can see the transition happens over 200 milliseconds. Let's extend this to 1,000 milliseconds. And if we hover over now? The change in opacity happens over 1,000 milliseconds.

So: opacity. A great way to control the see-through-ness of elements and their children.

And just a quick epilogue: generally opacity refers to something visual — in audio, we call it volume or gain. [Audio begins to fade out] But in both cases, it lets us control the variables which affect how fully something appears (or in the case of audio, how loudly something is heard). [Audio continues to fade out] Dale, I know you think it'll be funny, but please don't drop the gain here. I know your sense of humor. And I'm just gonna send it back for another revision. Don't cut me off or— [Audio completely fades out into nothing]

Related tutorial