Opacity
Atomic opacity classes allow you to change an element's opacity quickly.
Classes
| Class | Output | Hover? | Focus? |
|---|---|---|---|
.o0 | opacity: 0 | ||
.o5 | opacity: 0.05 | ||
.o10 | opacity: 0.1 | ||
.o20 | opacity: 0.2 | ||
.o30 | opacity: 0.3 | ||
.o40 | opacity: 0.4 | ||
.o50 | opacity: 0.5 | ||
.o60 | opacity: 0.6 | ||
.o70 | opacity: 0.7 | ||
.o80 | opacity: 0.8 | ||
.o90 | opacity: 0.9 | ||
.o100 | opacity: 1 |
Examples
<div class="o0">…</div>
<div class="o5">…</div>
<div class="o10">…</div>
<div class="o20">…</div>
<div class="o30">…</div>
<div class="o40">…</div>
<div class="o50">…</div>
<div class="o60">…</div>
<div class="o70">…</div>
<div class="o80">…</div>
<div class="o90">…</div>
<div class="o100">…</div>.o0
.o5
.o10
.o20
.o30
.o40
.o50
.o60
.o70
.o80
.o90
.o100