JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="flipper">
        <div class="fake" /></div>
    <div class="fake1" />
</body>

CSS

.flipper {
        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMMSb5XY_fztmTj2rSwFNn-nw2zxId1ZJLnuFfy39Rk-g2fHZ1) no-repeat;
        background-size: 98% 98%;
        background-position: 4px 4px;
        width: 400px;
        height: 400px;
        background-color: #eee;
    }
    .fake {
        position: relative;
        top: -200px;
        left: 0;
        height: 200px;
        width: 400px;
        background-color: white;
    }
    .fake1 {
        position: relative;
        top: 200px;
        left: 0;
        height: 200px;
        width: 400px;
        background-color: white;
    }

JavaScript

$.fn.jflip = function (bgimage) {
    var img = bgimage;
    this.hover(function () {
        $(".fake").animate({
            top: '+=200px'
        }, 500);
        $(".fake1").animate({
            top: '-=200px'
        }, 500);
        $(".fake").delay(300).animate({
            top: '-=200px'
        }, 500);
        $(".fake1").delay(300).animate({
            top: '+=200px'
        }, 500);
    });
}

$(".flipper").jflip("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQjWCeob4TPgp7D53RVWJLl1MGausjj_osju_KdTvQlN9bKDNL97Q");