AtoZ CSS Screencast: The CSS Opacity Property

The opacity property specifies how opaque an element is.

It takes a value ranging from 0 to 1 where 0 is completely transparent and 1 is completely opaque.

In this practical episode we’ll look at how the opacity property works, including some of it’s downsides - and then create a CSS only fading slideshow using opacity and what we learned in "Episode 11: keyframe animations".

opacity

[code language="css"]
a img {
opacity:1;
}
[/code]

I have a linked image here with opacity set to 1. This is the default and makes the image completely opaque. Setting a value of 0 makes it completely transparent but does maintain its position in the document. Setting any value between 0 and 1 makes it semi-transparent.

When setting opacity to anything other than 1, a new stacking context is created which places the semi-transparent element on a new layer. As such, the background on the element beneath is partially visible.

I like to use this effect to give some visual feedback to uses hovering over images that are links. opacity is a property that can be animated, and by adding a transition to the image, the effect is a nice subtle fade.

[code language="css"]
a img {transition:0.3s;}
a:hover img {opacity:0.75;}
[/code]

Opacity and content

When applying opacity to an element that contains other content, the child elements also appear semi-transparent, regardless of any opacity value set on them.

If I wanted to create a box with a semi-transparent background, opacity would make the box and all its contents semi-transparent. The best thing to use in this case would be a background colour set in rgba which we looked at in "Episode 3: CSS Color Syntax".

Continue reading %AtoZ CSS Screencast: The CSS Opacity Property%

by Guy Routledge via SitePoint