Pro

Blur

Use this effect to blur an element on interaction

Overview

Use blur value in data-fx data attribute to smoothly blur the element using CSS SVG filter: blur. Default blur distance is 0.375rem (6px), means that element will use a filter: blur(0.375rem);. Read more in Distance section.

How to use

Use data-fx="{action}:blur" data attribute to blur an element.

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 blur the element on its hover, add data-fx="h:blur" data attribute.

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

On active

To blur the element when it gets .active class, add data-fx="a:blur" data attribute.

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

On trigger hover

Blur 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:blur" data attribute to the elements you want to blur when trigger is hovered.

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

On trigger active

Blur 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:blur" data attribute to the elements you want to blur when trigger is hovered.

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