Opacity

This module is a sequence of opacity values that you can apply to any element to adjust the opacity of text, backgrounds, and images.

Note: This will set the opacity of the ENTIRE element. If you need a transparency background effect for white or black, see Grayscale

CSS Reference

Opacity scale

<img src="#" class="o-90">
<img src="#" class="o-80">
<img src="#" class="o-70">
<img src="#" class="o-60">
<img src="#" class="o-50">
<img src="#" class="o-40">
<img src="#" class="o-30">
<img src="#" class="o-20">
<img src="#" class="o-10">
<img src="#" class="o-05">
<img src="#" class="w-100 o-025"> 
/*

    OPACITY

*/

.o-100 { opacity: 1;    }
.o-90  { opacity: .9;   }
.o-80  { opacity: .8;   }
.o-70  { opacity: .7;   }
.o-60  { opacity: .6;   }
.o-50  { opacity: .5;   }
.o-40  { opacity: .4;   }
.o-30  { opacity: .3;   }
.o-20  { opacity: .2;   }
.o-10  { opacity: .1;   }
.o-05  { opacity: .05;  }
.o-025 { opacity: .025; }
.o-0   { opacity: 0; }