Built in Hover triggers PRO

Trigger one or multiple effects when user hovers over the element

Overview

A Hover trigger, as the name says, triggers the effect transition (animation) when user performs :hover action on one or multiple elements. To add an effect on the single element, use Triggers. If you need to animate multiple effects at once, when the user hovers over the one (parent) element, use the Parent triggers. You can even combine these both triggers.

Syntax

Trigger syntax is as follows {hover:|hover/T:}{effect} where:

• hover: - trigger effect on element :hover
• hover/T: - trigger effect on child elements when parent element gets :hover

Single

To launch the effect on single element :hover state, use data-fx="hover:{effect}".

<div data-fx="hover:bg-color--danger">Background color</div>
<div data-fx="hover:opacity--50">Opacity</div>
<div data-fx="hover:push--up">Push up</div>

Parent

Trigger multiple effects on child elements when parent element gets :hover state use data-fx="hover/T:{effect}".

<div data-fx-trigger="hover">
  <div data-fx="hover/T:bg-color--danger">Background color</div>
  <div data-fx="hover/T:opacity--50">Opacity</div>
  <div data-fx="hover/T:push--up">Push up</div>
</div>

Multiple

You are free to combine multiple triggers between, or even with parent triggers in one data-fx attribute.

Single

Use multiple hover: in one data-fx attribute.

<div data-fx="hover:push--up hover:shadow--risen">Push & shadow</div>
<div data-fx="hover:shrink--small hover:bg-darken--5">Shrink & darken</div>
<div data-fx="hover:turn[5deg] hover:opacity--80">Turn & opacity</div>

Parent

Use multiple hover/T: in one data-fx attribute.

<div data-fx-trigger="hover">
  <div data-fx="hover/T:push--up hover/T:shadow--risen">Push & shadow</div>
  <div data-fx="hover/T:shrink--small hover/T:bg-darken--5">Shrink & darken</div>
  <div data-fx="hover/T:turn[5deg] hover/T:opacity--80">Turn & opacity</div>
</div>

Combination

You can even combine hover: with hover/T:. But because hover/T: has a higher priority it may override hover: trigger on some effects. Place exclamation mark ! before the trigger shorthand like this !hover:{effect}. This will add !important attribute to the trigger and override the parent trigger. This is useful when you have couple of similar elements and you need to animate them once the parent trigger is hovered, but you also need to trigger the animation (transition) on individual elements :hover state without nesting them.

<!-- Default behavior -->
<div data-fx-trigger="hover">
  <div data-fx="hover/T:bg-color--danger hover:bg-color--secondary">Push & shadow</div>
  <div data-fx="hover/T:shrink--small hover:grow--out--small">Shrink & darken</div>
  <div data-fx="hover/T:opacity--50 hover:opacity--10">Turn & opacity</div>
</div>

<!-- With `!` exclamation mark -->
<div data-fx-trigger="hover">
  <div data-fx="hover/T:bg-color--danger !hover:bg-color--secondary">Push & shadow</div>
  <div data-fx="hover/T:shrink--small !hover:grow--out--small">Shrink & darken</div>
  <div data-fx="hover/T:opacity--50 !hover:opacity--10">Turn & opacity</div>
</div>