Opacity
Atomic opacity classes allow you to change an element’s opacity quickly.
| 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; |
<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