Pro

Opacity

Control the element opacity

Overview

Use o-{value} values in data-fx data attribute to set element opacity. Where {value} is one of:

  • o-0 - opacity 0%
  • o-5 - opacity 5%
  • o-10 - opacity 10%
  • o-20 - opacity 20%
  • o-30 - opacity 30%
  • o-40 - opacity 40%
  • o-50 - opacity 50%
  • o-60 - opacity 60%
  • o-70 - opacity 70%
  • o-80 - opacity 80%
  • o-90 - opacity 90%
  • o-100 - opacity 100%

How to use

Use data-fx="{action}:o-{value}" data attribute to change the element’s opacity.

Where {action} is one of:

  • h: to animate an element when it’s hovered
  • a: to animate an element when it gets .active class
  • th: to animate an element when the parent trigger is hovered
  • ta: to animate an element when the parent trigger gets .active or .show class

On hover

To change opacity of a single element on its hover, add data-fx="h:o-{value}" data attribute.

h:o-50
<div data-fx="h:o-50">h:o-50</div>

On active

To change opacity of a single element when it gets .active class, add data-fx="a:o-{value}" data attribute.

Click the elements to toggle its .active class
a:o-50
<div data-fx="a:o-50">a:o-50</div>

On trigger hover

Change opacity of a single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:o-{value}" data attribute to elements you want to change opacity when trigger is hovered.

Hover this trigger
th:o-50
<div data-trigger="hover">
  <div data-fx="th:o-50">th:o-50</div>
</div>

On trigger active

Change opacity of a single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="{active|show}" attribute to it, then add data-fx="ta:o-{value}" data attribute to elements you want to change opacity when trigger is hovered.

Click this trigger to toggle its .active class
ta:o-50
<div data-trigger="active">
  <div data-fx="ta:o-50">ta:o-50</div>
</div>