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--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.