Pro

Fill

Create simple background fill effect with ease

Overview

Use fill value in data-fx data attribute to add background fill effect.

How to use

Use data-fx="{action}:fill" data attribute to add background fill.

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 add a fill effect to a single element on its hover, add data-fx="h:o-{value}" data attribute.

h:fill
<div data-fx="h:fill">h:fill</div>

On active

To add a fill effect to 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:fill
<div data-fx="a:fill">a:fill</div>

On trigger hover

Add a fill effect to 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 add a fill effect when trigger is hovered.

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

On trigger active

Add a fill effect to 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 add a fill effect when trigger is hovered.

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

Styling

Color variations

Add data-fx="{action}:fill-{color}" to add a background fill color. Where {color} is one of a theme colors. Or add fill[{color}] to set a custom color.

h:fill-primary
h:fill-secondary
h:fill-success
h:fill-danger
h:fill-warning
h:fill-info
h:fill-light
h:fill-dark


h:fill[navy]
h:fill[#ff0000]
<div data-fx="h:fill-primary">h:fill-primary</div>
<div data-fx="h:fill-secondary">h:fill-secondary</div>
<div data-fx="h:fill-success">h:fill-success</div>
<div data-fx="h:fill-danger">h:fill-danger</div>
<div data-fx="h:fill-warning">h:fill-warning</div>
<div data-fx="h:fill-info">h:fill-info</div>
<div data-fx="h:fill-light">h:fill-light</div>
<div data-fx="h:fill-dark">h:fill-dark</div>

<div data-fx="h:fill[navy]">h:fill[navy]</div>
<div data-fx="h:fill[#ff0000]">h:fill[#ff0000]</div>

Skew effect

Add fill-skew to data-fx="{action}:fill" to create a nice skewed effect on background fill.

h:fill fill-skew
<div data-fx="h:fill fill-skew">h:fill fill-skew</div>

fill-skew also works on data-fx="{action}:fill-{color}".

h:fill-primary fill-skew
h:fill-secondary fill-skew
h:fill-success fill-skew
h:fill-danger fill-skew
h:fill-warning fill-skew
h:fill-info fill-skew
h:fill-light fill-skew
h:fill-dark fill-skew
<div data-fx="h:fill-primary fill-skew">h:fill-primary fill-skew</div>
<div data-fx="h:fill-secondary fill-skew">h:fill-secondary fill-skew</div>
<div data-fx="h:fill-success fill-skew">h:fill-success fill-skew</div>
<div data-fx="h:fill-danger fill-skew">h:fill-danger fill-skew</div>
<div data-fx="h:fill-warning fill-skew">h:fill-warning fill-skew</div>
<div data-fx="h:fill-info fill-skew">h:fill-info fill-skew</div>
<div data-fx="h:fill-light fill-skew">h:fill-light fill-skew</div>
<div data-fx="h:fill-dark fill-skew">h:fill-dark fill-skew</div>