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.



Let’s give the caption on the image some transparency! In style.css, set .caption to have 0.75 opacity.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?