Skip to Content
Learn
CSS Visual Rules
Opacity

Opacity is the measure of how transparent an element is. It’s measured from 0 to 1, with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully invisible.

Opacity can be used to make elements fade into others for a nice overlay effect. To adjust the opacity of an element, the syntax looks like this:

.overlay { opacity: 0.5; }

In the example above, the .overlay element would be 50% visible, letting whatever is positioned behind it show through.

Instructions

1.

Make the .caption class transparent by adding an opacity attribute with a value of 0.75.

Folder Icon

Take this course for free

Already have an account?