JSFiddle - React, Tailwind, and code Playground

HTML

<div id="crossparallax">
    <div class="isotope-item">
        <div class="wrapper">
            <div class="item">
                <div class="relative">
                    <img class="back" src="http://suedsolutions.de/susodemo2/frontend/assets/uploads/img/projects/CDU-Kaufmann-Merkel_2_back.jpg" alt="" />
                    <img class="front" src="http://suedsolutions.de/susodemo2/frontend/assets/uploads/img/projects/CDU-Kaufmann-Merkel_2_front.png" alt="" />
                </div>
            </div>
        </div>
    </div>
    <div class="isotope-item">
        <div class="wrapper">
            <div class="item">
                <div class="relative">
                    <img class="back" src="http://suedsolutions.de/susodemo2/frontend/assets/uploads/img/projects/CDU-Kaufmann-Merkel_2_back.jpg" alt="" />
                    <img class="front" src="http://suedsolutions.de/susodemo2/frontend/assets/uploads/img/projects/CDU-Kaufmann-Merkel_2_front.png" alt="" />
                </div>
            </div>
        </div>
    </div>
    <div class="isotope-item">
        <div class="wrapper">
            <div class="item">
                <div class="relative">
                    <img class="back" src="http://suedsolutions.de/susodemo2/frontend/assets/uploads/img/projects/CDU-Kaufmann-Merkel_2_back.jpg" alt="" />
                    <img class="front" src="http://suedsolutions.de/susodemo2/frontend/assets/uploads/img/projects/CDU-Kaufmann-Merkel_2_front.png" alt="" />
                </div>
            </div>
        </div>
    </div>
    <div class="isotope-item">
        <div class="wrapper">
            <div class="item">
                <div class="relative">
                    <img class="back" src="http://suedsolutions.de/susodemo2/frontend/assets/uploads/img/projects/CDU-Kaufmann-Merkel_2_back.jpg" alt="" />
                    <img class="front"...

CSS

body {
    margin: 0;
}

.isotope-item {
    width: 100%;
    height: 400px;
    float: left;
}
@media (min-width: 768px) {
    .isotope-item {
        width: 50%;
    }
}
@media (min-width: 1360px) {
    .isotope-item {
        width: 33.33333%;
        width: calc(100% / 3);
    }
}
.relative {
    position: relative;
    width: 100%;
    height: 100%;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}
.item {
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 200px 200px;
    transition: 200ms all linear;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.item .back, .item .front {
    pointer-events: none;
}
.item .front {
    position: absolute;
}
.item img {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
    height: 110%;
    width: 110%;
    top: -5%;
    left: -5%;
    overflow: hidden;
    transform-style: preserve-3d;
}

JavaScript

// requestAnimationFrame
(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
            callback(currTime + timeToCall);
        },
        timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
    };
}());

window.onresize = function () {
    setBase();
};


var ratio = 30,
    ratioFront = 20,
    ratioBack = 50;

var wrapperClass = '.isotope-item',
    itemClass = '.item';

var base, rows, tiles, count;

ratio = ratio * 100000;

function setBase() {
    var width = window.innerWidth;

    if (width <= 768) {
        base = 1;
    } else if (width <= 1359) {
        base = 2;
    } else {
        base = 3;
    }
}

window.giveIds = function () {
    tiles = [];
    count = 0;

    setBase();

    $(wrapperClass).each(function (i) {
        $(this).attr('id', '');
    });

    $(wrapperClass + ':visible').each(function (i) {
        $(this).attr('id', '' + i);
        tiles.push($(this));
        count++;
        rows = count / base; // todo tiles.length
    });
}

window.giveIds();

$('#crossparallax').mousemove(function (e) {

    tiles.forEach(function (self, index) {

        if (e.target.id == self.attr('id')) {

            window.requestAnimationFrame(function () {
                var offset = self.offset(),
                   ...