Canvas Docs

Opacity

Opacity

Canvas provides both Bootstrap style opacity utilities and its own fine grained opacity scale, plus an opacity transition helper.

Bootstrap opacity

Class Opacity
.opacity-0 0
.opacity-25 0.25
.opacity-50 0.5
.opacity-75 0.75
.opacity-100 1

Canvas fine scale

Canvas adds a .op-* scale in 0.1 steps, handy for image overlays and hover reveals:

Class Opacity
.op-0 0
.op-01 0.1
.op-02 0.2
.op-03 0.3
.op-04 0.4
.op-05 0.5
.op-06 0.6
.op-07 0.7
.op-08 0.8
.op-09 0.9
.op-1 1

Hover opacity

Every step has a hover twin that changes opacity on hover: .h-op-0, .h-op-01 ... .h-op-1.

Smooth transition

Add .op-ts to animate opacity changes (it sets transition: opacity). Combine with a hover class for a fade effect:

<div class="op-06 h-op-1 op-ts">
  Sits at 60% opacity, fades to full on hover.
</div>

Usage

Dim a background image so overlaid text stays legible:

<div class="position-relative">
  <img src="photo.jpg" class="op-05" alt="">
  <div class="position-absolute top-50 start-50 translate-middle">
    Readable caption
  </div>
</div>

Classes

ClassDescription
.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-tsApplies Opacity CSS3 Transitions on the Element
Example: [ch_pre]
...
[/ch_pre]
Was this page helpful?