JSFiddle - React, Tailwind, and code Playground

HTML

<div id="base-layer">
    <div id="layer-one" class="layer">
        Content
        <div id="layer-two" class="layer">
            Content
            <div id="layer-three" class="layer">
                Content
                <section class="slider">
                    <img src="http://i.imgur.com/fVWomWz.png"></img>
                </section>
            </div>
        </div>
    </div>
</div>

CSS

.layer {
    padding: 20px;
    color: white;
}
#base-layer {
    overflow: hidden;
}

#layer-one {
    background: red;
}
#layer-two {
    background: green;
}
#layer-three {
    background: blue;
}
.slider {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding-top: 200px;
}
.slider img {
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

JavaScript

$(document).ready(function () {
    $('#layer-one').mousemove(function (e) {
        parallax(e, this, 1);
        parallax(e, document.getElementById('layer-two'), 2);
        parallax(e, document.getElementById('layer-three'), 3);
    });
});

function parallax(e, target, layer) {
    var layer_coeff = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
    var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
    $(target).offset({ top: y ,left : x });
};