CSS3 Opacity

CSS3 opacity allows the useful control of setting how see-through an element is and is great for backgrounds and creating :hover effects.

The declaration 'opacity' sets the value to how opaque an elements is: layer, text, image, etc... An element with opacity value 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the element is.

CSS 3 Opacity (Example 1 : layers)

The above opacity example is set in another layer containing a textured background with each layer uses the following CSS

  1. CSS 3 Opacity (layers)
  2. div.L1 { background:#036; opacity:0.2; height:20px; }
  3. div.L2 { background:#036; opacity:0.4; height:20px; }
  4. div.L3 { background:#036; opacity:0.6; height:20px; }
  5. div.L4 { background:#036; opacity:0.8; height:20px; }
  6. div.L5 { background:#036; opacity:1.0; height:20px; }
 

CSS 3 Opacity (Example 2 : images)

The above images are each set with their own opacity levelts using the following CSS

  1. CSS 3 Opacity (images)
  2. img.1 { opacity:0.25; width:150px; height:100px; }
  3. img.2 { opacity:0.50; width:150px; height:100px; }
  4. img.3 { opacity:0.75; width:150px; height:100px; }

I used levels of opacity on my own website some years ago for a gallery and it worked really quite nicely, with a slightly opaque image that on :hover, reached 100% opacity (Example here).

 

The Zen Elements CSS3 Series

Thank you for reading!
@zen