JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="box">
    <div class="wrap">
        <div class="folding_img">
        </div>
    </div>
</div>

CSS

img {
    vertical-align: bottom;
}

.box {
    height: 300px;
    width: 500px;
}

.folding_img {
    background-image: url('http://imperiomf.files.wordpress.com/2011/12/naruto-kakashi-sakura-sasuke.jpg');
    backgorund: red;
    background-size: cover;
}

JavaScript

/*(function() {
    var wrap = $('.wrap');
    var clone = folding_img.clone();

    wrap.css({
        'height': '50%',
        'overflow': 'hidden'
    });
    clone.css({
        'height': '50%',
        'overflow': 'hidden',
        'background-position': '0 100%';
    });

    clone.appendTo('.box');
})();*/