CSS Visual Rules : Opacity

 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.Let’s give the caption on the image some transparency! In style.css, set .caption to have 0.75 opacity.

Hint:

Use the opacity property to change an element’s opacity!