JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<img 
  alt="" 
  class="image-flip" 
  data-secondIMG="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"  
  src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"
/>

CSS

div.image-flip {
    border: 1px dashed red;
    float: left;
    position: relative;
    text-align: center;
}

div.image-flip img {
    display: inline-block;
    position: relative;
    z-index: 2;
    height: 100%;
}
div.image-flip .second-image {
    width: 0px;
    z-index: 1;
}

JavaScript

var imgFlip = $('.image-flip');

imgFlip
    .wrap('<div class="'+ imgFlip.attr('class') +'" />')
    .addClass('first-image')
    .removeClass('image-flip');

var imgFlip = $('.image-flip');

$('<img class="second-image" src="'+ imgFlip.find('img').data('secondimg') +'" alt="" />').appendTo( imgFlip );

var imgFlipW = imgFlip.width(),
    imgFlipH = imgFlip.height();

imgFlip.css({ width: imgFlipW, height: imgFlipH });

imgFlip.addClass('ready').on("click", function() {

    var obj = $(this),
        objW = obj.width(),
        firstIMG = obj.find('.first-image'),
        secondIMG = obj.find('.second-image');

    firstIMG.animate({
        width: 0
    }, 300, function() {
    
        secondIMG.animate({
            width: imgFlipW
        }, 270 );
    
    });

});