CodePen Embed - Animated Video Grid

<div class="wrapper">
  <h1>Hover on the cards.</h1>
  <div class="card" style="background-image: url('https://d21950x0o1sh55.cloudfront.net/assets/home/game-0e307d71d9838e8fbe4927b551f119bcd9e4748f2c2b70c7b81846702996ef94.jpg')">
    <div class="card__content">
      <a class="play-button">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50">
          <path d="M42.7,42.7L25,50L7.3,42.7L0,25L7.3,7.3L25,0l17.7,7.3L50,25L42.7,42.7z" class="polygon"></path>
          <polygon points="32.5,25 21.5,31.4 21.5,18.6 "></polygon>
        </svg>
      </a>
      <div class="card__content--description">
        <h3 class="roll-up">
          <span><span>P</span><span>P</span></span>
          <span><span>l</span><span>l</span></span>
          <span><span>a</span><span>a</span></span>
          <span><span>y</span><span>y</span></span>
        </h3>
        <p class="text-reveal">
          <span>
            <span>And get a chance to</span>
            <span>win tickets to the</span>
            <span>premiere of the movie</span>
          </span>
          <span>
            <span><span>And get a chance to</span></span>
            <span><span>win tickets to the</span></span>
            <span><span>premiere of the movie</span></span>
          </span>
        </p>
      </div>
    </div>
  </div>
  <div class="card" style="background-image: url('https://d21950x0o1sh55.cloudfront.net/uploads/inside_exclusif/picture/26/desktop_VALERIAN_BNP_68.jpg');">
    <div class="card__content">
      <a class="play-button">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50">
          <path d="M42.7,42.7L25,50L7.3,42.7L0,25L7.3,7.3L25,0l17.7,7.3L50,25L42.7,42.7z" class="polygon"></path>
          <polygon points="32.5,25 21.5,31.4 21.5,18.6 "></polygon>
        </svg>
      </a>
      <div class="card__content--description">
        <h3 class="roll-up">
          <span><span>T</span><span>T</span></span>
          <span><span>r</span><span>r</span></span>
          <span><span>a</span><span>a</span></span>
          <span><span>i</span><span>i</span></span>
          <span><span>l</span><span>l</span></span>
          <span><span>e</span><span>e</span></span>
          <span><span>r</span><span>r</span></span>
        </h3>
        <p class="text-reveal">
          <span>
            <span>Watch the new</span>
            <span>trailer of the movie</span>
          </span>
          <span>
            <span><span>Watch the new</span></span>
            <span><span>trailer of the movie</span></span>
          </span>
        </p>
      </div>
    </div>
  </div>
  <div class="card" style="background-image: url('https://d21950x0o1sh55.cloudfront.net/uploads/inside_exclusif/picture/50/desktop_guided_tour_2.jpg');">
    <div class="card__content">
      <a class="play-button">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50">
          <path d="M42.7,42.7L25,50L7.3,42.7L0,25L7.3,7.3L25,0l17.7,7.3L50,25L42.7,42.7z" class="polygon"></path>
          <polygon points="32.5,25 21.5,31.4 21.5,18.6 "></polygon>
        </svg>
      </a>
      <div class="card__content--description">
        <h3 class="roll-up">
          <span><span>C</span><span>C</span></span>
          <span><span>a</span><span>a</span></span>
          <span><span>s</span><span>s</span></span>
          <span><span>t</span><span>t</span></span>
        </h3>
        <p class="text-reveal">
          <span>
            <span>Get an exclusive</span>
            <span>preview of what's coming</span>
          </span>
          <span>
            <span><span>Get an exclusive</span></span>
            <span><span>preview of what's coming</span></span>
          </span>
        </p>
      </div>
    </div>
  </div>
  <div class="card" style="background-image: url('https://d21950x0o1sh55.cloudfront.net/uploads/inside_exclusif/picture/6/desktop_VALERIAN_BNP_02.jpg');">
    <div class="card__content">
      <a class="play-button">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50">
          <path d="M42.7,42.7L25,50L7.3,42.7L0,25L7.3,7.3L25,0l17.7,7.3L50,25L42.7,42.7z" class="polygon"></path>
          <polygon points="32.5,25 21.5,31.4 21.5,18.6 "></polygon>
        </svg>
      </a>
      <div class="card__content--description">
        <h3 class="roll-up">
          <span><span>A</span><span>A</span></span>
          <span><span>c</span><span>c</span></span>
          <span><span>c</span><span>c</span></span>
          <span><span>e</span><span>e</span></span>
          <span><span>s</span><span>s</span></span>
          <span><span>s</span><span>s</span></span>
        </h3>
        <p class="text-reveal">
          <span>
            <span>Footage that has</span>
            <span>never been seen before</span>
          </span>
          <span>
            <span><span>Footage that has</span></span>
            <span><span>never been seen before</span></span>
          </span>
        </p>
      </div>
    </div>
  </div>
</div>

// Unnecessary Styles
// =================================

html, body {
  width: 100%;
  height: 100%;
}
html {
  display: table;
}
body {
  background: #121212;
  background-size: cover;
  display: table-cell;
  vertical-align: middle;
  font-family: "Exo 2", sans-serif;
  background-color: #312e4a;
  color: #d8d8d8;
  &:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.85;
  }
}
h1, h3, p {
  margin: 0;
  text-transform: uppercase;
}
h1 {
  font-weight: 400;
  color: #fff;
  margin-bottom: 60px;
}
h3 {
  font-size: 1.5rem;
  margin-bottom: 5px;
  color: #fff;
}
p {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 2px;
}
.wrapper {
  position: relative;
  max-width: 1170px;
  margin: 0 auto;
  padding: 80px 20px;
}

// Styling
// =================================

$letters: 7;
$teal: #16e590;
$cubic-slow: cubic-bezier(0.7, 0.01, 0.37, 1);

.roll-up {
  overflow: hidden;
  position: relative;
  > span {
    display: inline-block;
    position: relative;
    @for $i from 1 through $letters {
      &:nth-child(#{$i}) {
        transition-delay: #{$i *.03}s;
      }
    }
    > span {
      display: inline-block;
      transition: .6s $cubic-slow;
      transition-delay: inherit;
      &:nth-child(1) {
        position: relative;
      }
      &:nth-child(2) {
        position: absolute;
        transform: translateY(100%);
        left: 0;
        color: $teal;
      }
    }
  }
}
.text-reveal {
  position: relative;
  overflow: hidden;
  span {
    display: block;
    transition: $cubic-slow 0.6s;
  }
  > span {
    &:nth-child(2) {
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
      > span {
        overflow: hidden;
        transform: translateX(-100%);
        @for $i from 1 through $letters {
          &:nth-child(#{$i}) {
            transition-delay: #{$i *.1}s;
          }
        }
        > span {
          transform: translateX(100%);
          transition-delay: inherit;
        }
      }
    }
  }
}
.play-button {
  display: inline-block;
  width: 70px;
  height: 70px;
  transition: 0.5s;
  svg {
    overflow: visible;
  }
  .polygon {
    fill: $teal;
    transition: transform 0.5s, fill 0.5s;
    transition-timing-function: $cubic-slow;
    transform-origin: 50% 50%;
  }
}
.card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 370px;
  width: 100%;
  height: 200px;
  padding: 20px;
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
  background-size: cover;
  cursor: pointer;
  margin: 0 100px 60px 0;
  &:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
  }
  .card__content {
    z-index: 1;
    .card__content--description {
      position: absolute;
      bottom: 20px;
      right: 0;
      margin-right: -80px;
      text-align: left;
      max-width: 175px;
    }
  }
  &:hover {
    // play button spin
    .play-button {
      transform: scale(1.1);
      .polygon {
        transform: translateZ(0px) rotate(90deg);
        fill: #67fbbe;
      }
    }
    // text roll
    .roll-up {
      > span {
        > span {
          &:nth-child(1) {
            transform: translateY(-100%);
          }
          &:nth-child(2) {
            transform: translateY(0);
          }
        }
      }
    }
    // paragraph reveal
    .text-reveal {
      > span:nth-child(2) > span,
      > span:nth-child(2) > span > span {
        transform: translateX(0);
      }
    }
  }
}

View Compiled

// inspiration: https://www.valerian.bnpparibas/en

// tilt.js

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                // require('jQuery') returns a factory that requires window to
                // build a jQuery instance, we normalize how we use modules
                // that require this pattern but the window provided is a noop
                // if it's defined (how jquery works)
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                }
                else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.fn.tilt = function (options) {

        /**
         * RequestAnimationFrame
         */
        const requestTick = function() {
            if (this.ticking) return;
            requestAnimationFrame(updateTransforms.bind(this));
            this.ticking = true;
        };

        /**
         * Bind mouse movement evens on instance
         */
        const bindEvents = function() {
            const _this = this;
            $(this).on('mousemove', mouseMove);
            $(this).on('mouseenter', mouseEnter);
            if (this.settings.reset) $(this).on('mouseleave', mouseLeave);
            if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this));
        };

        /**
         * Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms
         */
        const setTransition = function() {
            if (this.timeout !== undefined) clearTimeout(this.timeout);
            $(this).css({'transition': `${this.settings.speed}ms ${this.settings.easing}`});
            if(this.settings.glare) this.glareElement.css({'transition': `opacity ${this.settings.speed}ms ${this.settings.easing}`});
            this.timeout = setTimeout(() => {
                $(this).css({'transition': ''});
                if(this.settings.glare) this.glareElement.css({'transition': ''});
            }, this.settings.speed);
        };

        /**
         * When user mouse enters tilt element
         */
        const mouseEnter = function(event) {
            this.ticking = false;
            $(this).css({'will-change': 'transform'});
            setTransition.call(this);

            // Trigger change event
            $(this).trigger("tilt.mouseEnter");
        };

        /**
         * Return the x,y position of the mouse on the tilt element
         * @returns {{x: *, y: *}}
         */
        const getMousePositions = function(event) {
            if (typeof(event) === "undefined") {
                event = {
                    pageX: $(this).offset().left + $(this).outerWidth() / 2,
                    pageY: $(this).offset().top + $(this).outerHeight() / 2
                };
            }
            return {x: event.pageX, y: event.pageY};
        };

        /**
         * When user mouse moves over the tilt element
         */
        const mouseMove = function(event) {
            this.mousePositions = getMousePositions(event);
            requestTick.call(this);
        };

        /**
         * When user mouse leaves tilt element
         */
        const mouseLeave = function() {
            setTransition.call(this);
            this.reset = true;
            requestTick.call(this);

            // Trigger change event
            $(this).trigger("tilt.mouseLeave");
        };

        /**
         * Get tilt values
         *
         * @returns {{x: tilt value, y: tilt value}}
         */
        const getValues = function() {
            const width = $(this).outerWidth();
            const height = $(this).outerHeight();
            const left = $(this).offset().left;
            const top = $(this).offset().top;
            const percentageX = (this.mousePositions.x - left) / width;
            const percentageY = (this.mousePositions.y - top) / height;
            // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value
            const tiltX = ((this.settings.maxTilt / 2) - ((percentageX) * this.settings.maxTilt)).toFixed(2);
            const tiltY = (((percentageY) * this.settings.maxTilt) - (this.settings.maxTilt / 2)).toFixed(2);
            // angle
            const angle = Math.atan2(this.mousePositions.x - (left+width/2),- (this.mousePositions.y - (top+height/2)) )*(180/Math.PI);
            // Return x & y tilt values
            return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle};
        };

        /**
         * Update tilt transforms on mousemove
         */
        const updateTransforms = function() {
            this.transforms = getValues.call(this);

            if (this.reset) {
                this.reset = false;
                $(this).css('transform', `perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg)`);

                // Rotate glare if enabled
                if (this.settings.glare){
                    this.glareElement.css('transform', `rotate(180deg) translate(-50%, -50%)`);
                    this.glareElement.css('opacity', `0`);
                }

                return;
            } else {
                $(this).css('transform', `perspective(${this.settings.perspective}px) rotateX(${this.settings.axis === 'x' ? 0 : this.transforms.tiltY}deg) rotateY(${this.settings.axis === 'y' ? 0 : this.transforms.tiltX}deg) scale3d(${this.settings.scale},${this.settings.scale},${this.settings.scale})`);

                // Rotate glare if enabled
                if (this.settings.glare){
                    this.glareElement.css('transform', `rotate(${this.transforms.angle}deg) translate(-50%, -50%)`);
                    this.glareElement.css('opacity', `${this.transforms.percentageY * this.settings.maxGlare / 100}`);
                }
            }

            // Trigger change event
            $(this).trigger("change", [this.transforms]);

            this.ticking = false;
        };

        /**
         * Prepare elements
         */
        const prepareGlare = function () {
            const glarePrerender = this.settings.glarePrerender;

            // If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
            if (!glarePrerender)
            // Create glare element
                $(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>');

            // Store glare selector if glare is enabled
            this.glareElementWrapper = $(this).find(".js-tilt-glare");
            this.glareElement = $(this).find(".js-tilt-glare-inner");

            // Remember? We assume all css is already set, so just return
            if (glarePrerender) return;

            // Abstracted re-usable glare styles
            const stretch = {
                'position': 'absolute',
                'top': '0',
                'left': '0',
                'width': '100%',
                'height': '100%',
            };

            // Style glare wrapper
            this.glareElementWrapper.css(stretch).css({
                'overflow': 'hidden',
            });

            // Style glare element
            this.glareElement.css({
                'position': 'absolute',
                'top': '50%',
                'left': '50%',
                'pointer-events': 'none',
                'background-image': `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,
                'width': `${$(this).outerWidth()*2}`,
                'height': `${$(this).outerWidth()*2}`,
                'transform': 'rotate(180deg) translate(-50%, -50%)',
                'transform-origin': '0% 0%',
                'opacity': '0',
            });

        };

        /**
         * Update glare on resize
         */
        const updateGlareSize = function () {
            this.glareElement.css({
                'width': `${$(this).outerWidth()*2}`,
                'height': `${$(this).outerWidth()*2}`,
            });
        };

        /**
         * Public methods
         */
        $.fn.tilt.destroy = function() {
            $(this).each(function () {
                $(this).find('.js-tilt-glare').remove();
                $(this).css({'will-change': '', 'transform': ''});
                $(this).off('mousemove mouseenter mouseleave');
            });
        };

        $.fn.tilt.getValues = function() {
            const results = [];
            $(this).each(function () {
                this.mousePositions = getMousePositions.call(this);
                results.push(getValues.call(this));
            });
            return results;
        };

        $.fn.tilt.reset = function() {
            $(this).each(function () {
                this.mousePositions = getMousePositions.call(this);
                this.settings = $(this).data('settings');
                mouseLeave.call(this);
                setTimeout(() => {
                    this.reset = false;
                }, this.settings.transition);
            });
        };

        /**
         * Loop every instance
         */
        return this.each(function () {

            /**
             * Default settings merged with user settings
             * Can be set trough data attributes or as parameter.
             * @type {*}
             */
            this.settings = $.extend({
                maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20,
                perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300,
                easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)',
                scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1',
                speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400',
                transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true,
                axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null,
                reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true,
                glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false,
                maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1,
            }, options);


            this.init = () => {
                // Store settings
                $(this).data('settings', this.settings);

                // Prepare element
                if(this.settings.glare) prepareGlare.call(this);

                // Bind events
                bindEvents.call(this);
            };

            // Init
            this.init();

        });
    };

    /**
     * Auto load
     */
    $('[data-tilt]').tilt();

    return true;
}));

$(".card").tilt({
  glare: true,
  maxGlare: .2,
  maxTilt: 5
});

This Pen is owned by Dan on CodePen.

See more by @dtab428 on CodePen

External CSS

https://fonts.googleapis.com/css?family=Exo+2:400,500,700,900

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js