Pro

Reveal

Stylish effect that reveals hidden content in four directions

Overview

Use reveal-{direction} values in data-fx data attribute to smoothly reveal the hidden elements that are wrapped in element with .wrap class. Elements are positioned outside the .wrap at the beginning and transformed to default position on {action}.

How to use

Use data-fx="{action}:reveal{direction}" data attribute to reveal a hidden element. Wrap all content into .wrap 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

… and {direction} is one of:

  • -up to reveal an element from bottom up
  • -down to reveal an element from top down
  • -left to reveal an element from right to left
  • -right to reveal an element from left to right

Structure of reveal-{direction}:

<div data-fx="{action}:reveal-{direction}">
  <div class="wrap">
    Content...
  </div>
</div>

Do not use any data-fx attribute on .wrap element! This will cause unpredicted behavior.

On hover

To reveal a hidden content on its hover, add data-fx="h:reveal-{direction}" data attribute.

h:reveal-up
h:reveal-down
h:reveal-left
h:reveal-right
<div data-fx="h:reveal-up">
  <div class="wrap">h:reveal-up</div>
</div>
<div data-fx="h:reveal-down">
  <div class="wrap">h:reveal-down</div>
</div>
<div data-fx="h:reveal-left">
  <div class="wrap">h:reveal-left</div>
</div>
<div data-fx="h:reveal-right">
  <div class="wrap">h:reveal-right</div>
</div>

On active

To reveal a hidden content when it gets .active class, add data-fx="a:reveal-{direction}" data attribute.

Click the elements to toggle its .active class
a:reveal-up
a:reveal-down
a:reveal-left
a:reveal-right
<div data-fx="a:reveal-up">
  <div class="wrap">a:reveal-up</div>
</div>
<div data-fx="a:reveal-down">
  <div class="wrap">a:reveal-down</div>
</div>
<div data-fx="a:reveal-left">
  <div class="wrap">a:reveal-left</div>
</div>
<div data-fx="a:reveal-right">
  <div class="wrap">a:reveal-right</div>
</div>

On trigger hover

Reveal 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:reveal-{direction}" data attribute to the elements you want to reveal when trigger is hovered.

Hover this trigger
th:reveal-up
th:reveal-down
th:reveal-left
th:reveal-right
<div data-trigger="hover">
  <div data-fx="th:reveal-up">
    <div class="wrap">th:reveal-up</div>
  </div>
  <div data-fx="th:reveal-down">
    <div class="wrap">th:reveal-down</div>
  </div>
  <div data-fx="th:reveal-left">
    <div class="wrap">th:reveal-left</div>
  </div>
  <div data-fx="th:reveal-right">
    <div class="wrap">th:reveal-right</div>
  </div>
</div>

On trigger active

Reveal 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="th:reveal-{direction}" data attribute to the elements you want to reveal when trigger is hovered.

Click this trigger to toggle its .active class
ta:reveal-up
ta:reveal-down
ta:reveal-left
ta:reveal-right
<div data-trigger="active">
  <div data-fx="ta:reveal-up">
    <div class="wrap">ta:reveal-up</div>
  </div>
  <div data-fx="ta:reveal-down">
    <div class="wrap">ta:reveal-down</div>
  </div>
  <div data-fx="ta:reveal-left">
    <div class="wrap">ta:reveal-left</div>
  </div>
  <div data-fx="ta:reveal-right">
    <div class="wrap">ta:reveal-right</div>
  </div>
</div>