Opacity

List of Opacity Utility Classes included with Canvas.

Classes

Class Description
.op-*

Sets the opacity for an Element

Value
  • .op-0 - Sets an opacity of 0 on the Element
  • .op-01 - Sets an opacity of 0.1 on the Element
  • .op-02 - Sets an opacity of 0.2 on the Element
  • .op-03 - Sets an opacity of 0.3 on the Element
  • .op-04 - Sets an opacity of 0.4 on the Element
  • .op-05 - Sets an opacity of 0.5 on the Element
  • .op-06 - Sets an opacity of 0.6 on the Element
  • .op-07 - Sets an opacity of 0.7 on the Element
  • .op-08 - Sets an opacity of 0.8 on the Element
  • .op-09 - Sets an opacity of 0.9 on the Element
  • .op-1 - Sets an opacity of 1 on the Element
Hover
.h-op-{value} - Sets an Opacity Value on the Element on Hover

.op-ts

Applies Opacity CSS3 Transitions on the Element

Ex:

<div class="op-ts op-1 h-op-06">
	...
</div>

Last Modified: July 5, 2020