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--0`	`opacity: 0;`
`-opacity--20`	`opacity: 0.2;`
`-opacity--40`	`opacity: 0.4;`
`-opacity--60`	`opacity: 0.6;`
`-opacity--80`	`opacity: 0.8;`
`-opacity--100`	`opacity: 1;`

Hover

Class	Value
`-opacity-hover--0`	`opacity: 0;`
`-opacity-hover--20`	`opacity: 0.2;`
`-opacity-hover--40`	`opacity: 0.4;`
`-opacity-hover--60`	`opacity: 0.6;`
`-opacity-hover--80`	`opacity: 0.8;`
`-opacity-hover--100`	`opacity: 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--60`	60% opacity on `sm` and up.
`-opacity-md--60`	60% opacity on `md` and up.
`-opacity-lg--60`	60% opacity on `lg` and up.
`-opacity-xl--60`	60% opacity on `xl` and up.

Hover

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