For opacity: value use shorthand class .opacity-{value}
| Opacity on background (.bg-blue) | Opacity on text (.blue) | Class |
|
.opacity-100
|
.opacity-100
|
.opacity-100 |
|
.opacity-90
|
.opacity-90
|
.opacity-90 |
|
.opacity-80
|
.opacity-80
|
.opacity-80 |
|
.opacity-70
|
.opacity-70
|
.opacity-70 |
|
.opacity-60
|
.opacity-60
|
.opacity-60 |
|
.opacity-50
|
.opacity-50
|
.opacity-50 |
|
.opacity-40
|
.opacity-40
|
.opacity-40 |
|
.opacity-30
|
.opacity-30
|
.opacity-30 |
|
.opacity-20
|
.opacity-20
|
.opacity-20 |
|
.opacity-10
|
.opacity-10
|
.opacity-10 |
|
.opacity-0
|
.opacity-0
|
.opacity-0 |
Opacity can be applied on hover also. Use hover-opacity-{value}. Ex .hover-opacity-70
<div class="... hover-opacity-70 ...">...</div>