Opacity

Use to change the opacity of an element.

Examples #

Base #

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


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

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.