JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container demo">


    <div class="direction-reveal direction-reveal--3-grid-flexbox direction-reveal--demo-swing">

      <a href="#" class="direction-reveal__card">
        <img src="https://picsum.photos/300/180?image=0" alt="Image" class="img-fluid">

        <div class="direction-reveal__overlay">
          <h3 class="direction-reveal__title">foo</h3>
          <p class="direction-reveal__text">hogehoge</p>
        </div>
      </a>

      <a href="#" class="direction-reveal__card" >
        <img src="https://picsum.photos/300/180?image=1" alt="Image" class="img-fluid">

        <div class="direction-reveal__overlay">
          <h3 class="direction-reveal__title">bar</h3>
          <p class="direction-reveal__text">piyopiyo</p>
        </div>
      </a>

      <a href="#" class="direction-reveal__card">
        <img src="https://picsum.photos/300/180?image=2" alt="Image" class="img-fluid">

        <div class="direction-reveal__overlay">
          <h3 class="direction-reveal__title">hoge</h3>
          <p class="direction-reveal__text">foo</p>
        </div>
      </a>

      <a href="#" class="direction-reveal__card">
        <img src="https://picsum.photos/300/180?image=3" alt="Image" class="img-fluid">

        <div class="direction-reveal__overlay">
          <h3 class="direction-reveal__title">piyo</h3>
          <p class="direction-reveal__text">bar</p>
        </div>
      </a>

      <a href="#" class="direction-reveal__card">
        <img src="https://picsum.photos/300/180?image=4" alt="Image" class="img-fluid">

        <div class="direction-reveal__overlay">
          <h3 class="direction-reveal__title">東京</h3>
          <p class="direction-reveal__text">わがふるさと</p>
        </div>
      </a>

      <a href="#" class="direction-reveal__card">
        <img src="https://picsum.photos/300/180?image=5" alt="Image" class="img-fluid">

        <div class="direction-reveal__overlay">
          <h3 class="direction-reveal__title">埼玉</h3>
       ...

CSS

.swing--in-top .direction-reveal__overlay {
    -webkit-animation-name: swing--in-top;
    animation-name: swing--in-top;
}

.swing--in-bottom .direction-reveal__overlay {
    -webkit-animation-name: swing--in-bottom;
    animation-name: swing--in-bottom;
}

.swing--in-left .direction-reveal__overlay {
    -webkit-animation-name: swing--in-left;
    animation-name: swing--in-left;
}

.swing--in-right .direction-reveal__overlay {
    -webkit-animation-name: swing--in-right;
    animation-name: swing--in-right;
}

.swing--out-top .direction-reveal__overlay {
    -webkit-animation-name: swing--out-top;
    animation-name: swing--out-top;
}

.swing--out-bottom .direction-reveal__overlay {
    -webkit-animation-name: swing--out-bottom;
    animation-name: swing--out-bottom;
}

.swing--out-left .direction-reveal__overlay {
    -webkit-animation-name: swing--out-left;
    animation-name: swing--out-left;
}

.swing--out-right .direction-reveal__overlay {
    -webkit-animation-name: swing--out-right;
    animation-name: swing--out-right;
}

.direction-reveal [class*='swing--'] .direction-reveal__overlay {
    -webkit-transform: rotate3d(0, 0, 0, 0);
    transform: rotate3d(0, 0, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.swing--in-top, .swing--out-top {
    -webkit-perspective-origin: center top;
    perspective-origin: center top;
}

.swing--in-top .direction-reveal__overlay, .swing--out-top .direction-reveal__overlay {
    -webkit-transform-origin: center top;
    transform-origin: center top;
}

.swing--in-bottom, .swing--out-bottom {
    -webkit-perspective-origin: center bottom;
    perspective-origin: center bottom;
}

.swing--in-bottom .direction-reveal__overlay, .swing--out-bottom .direction-reveal__overlay {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

.swing--in-left, .swing--out-left {
   ...

JavaScript

(function e(t, n, r) {
    function s(o, u) {
        if (!n[o]) {
            if (!t[o]) {
                var a = typeof require == "function" && require;
                if (!u && a) return a(o, !0);
                if (i) return i(o, !0);
                var f = new Error("Cannot find module '" + o + "'");
                throw f.code = "MODULE_NOT_FOUND", f
            }
            var l = n[o] = {
                exports: {}
            };
            t[o][0].call(l.exports, function(e) {
                var n = t[o][1][e];
                return s(n ? n : e)
            }, l, l.exports, e, t, n, r)
        }
        return n[o].exports
    }
    var i = typeof require == "function" && require;
    for (var o = 0; o < r.length; o++) s(r[o]);
    return s
})({
    1: [function(require, module, exports) {
        'use strict';

        Object.defineProperty(exports, "__esModule", {
            value: true
        });

        /**
  Direction aware content reveals.

  @param {Object} object - Container for all options.
  @param {string} selector - Container element selector.
  @param {string} itemSelector - Item element selector.
  @param {string} animationName - Animation CSS class.
  @param {bollean} enableTouch  - Adds touch event to show content on first click then follow link on the second click.
  @param {integer} touchThreshold - Touch length must be less than this to trigger reveal which prevents the event triggering if user is scrolling.
*/

        var DirectionReveal = function DirectionReveal() {
            var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
            _ref$selector = _ref.selector,
                selector = _ref$selector === undefined ? '.direction-reveal' : _ref$selector,
                _ref$itemSelector = _ref.itemSelector,
                itemSelector = _ref$itemSelector === undefined ? '.direction-reveal__card' : _ref$itemSelector,
                _ref$animationName = _ref.animationName,
   ...