Opacity

Use to change the opacity of an element.

Examples

Base

Use -opacity--{value} to change the opacity of an element.

<div class="-opacity--0">...</div>
<div class="-opacity--20">...</div>
<div class="-opacity--40">...</div>
<div class="-opacity--60">...</div>
<div class="-opacity--80">...</div>
<div class="-opacity--100">...</div>

Hover

Use -opacity-hover--{value} to change the opacity of an element on hover.

0% on hover
20% on hover
40% on hover
60% on hover
80% on hover
100% on hover
<div class="-opacity-hover--0">...</div>
<div class="-opacity-hover--20">...</div>
<div class="-opacity-hover--40">...</div>
<div class="-opacity-hover--60">...</div>
<div class="-opacity-hover--80">...</div>
<div class="-opacity--60 -opacity-hover--100">...</div>

Responsive

Responsive opacity classes can be defined using the format -opacity[-{breakpoint}]--{value} and -opacity-hover[-{breakpoint}]--{value}. Breakpoints supported are sm, md, lg, and xl.

Target all breakpoints

Opacity utility classes with no breakpoint defined apply to all screen sizes.

Base

Class
Value
-opacity--0opacity: 0;
-opacity--20opacity: 0.2;
-opacity--40opacity: 0.4;
-opacity--60opacity: 0.6;
-opacity--80opacity: 0.8;
-opacity--100opacity: 1;

Hover

Class
Value
-opacity-hover--0opacity: 0;
-opacity-hover--20opacity: 0.2;
-opacity-hover--40opacity: 0.4;
-opacity-hover--60opacity: 0.6;
-opacity-hover--80opacity: 0.8;
-opacity-hover--100opacity: 1;

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class. As Chi is a mobile first library, the value will apply to that specific breakpoint and up.

Base

Class
Value
-opacity-sm--6060% opacity on sm and up.
-opacity-md--6060% opacity on md and up.
-opacity-lg--6060% opacity on lg and up.
-opacity-xl--6060% opacity on xl and up.

Hover

Class
Value
-opacity-hover-sm--6060% opacity on hover on sm and up.
-opacity-hover-md--6060% opacity on hover on md and up.
-opacity-hover-lg--6060% opacity on hover on lg and up.
-opacity-hover-xl--6060% opacity on hover on xl and up.