JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contain">
    <div class="effeckt-caption">
        <div class="hint">hint</div>
        <img src="http://placehold.it/300x200" alt="" />
        <div class="figcaption">
            <div class="effeckt-figcaption-wrap">
                 <h3>Cover Push Right</h3>

                <p>Lorem ipsum dolar.</p>
            </div>
        </div>
    </div>
</div>
<div class="contain">
    <div class="effeckt-caption">
        <div class="hint">hint</div>
        <img src="http://placehold.it/300x200" alt="" />
        <div class="figcaption">
            <div class="effeckt-figcaption-wrap">
                 <h3>Cover Push Right</h3>

                <p>Lorem ipsum dolar.</p>
            </div>
        </div>
    </div>
</div>

CSS

/* hint */
 .hint {
    position: relative;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    top:25px;
    left:10px;
    z-index:1;
    cursor:pointer;
}
.contain {
    overflow:hidden;
    margin:0 auto;
    padding:0;
}
.effeckt-caption .figcaption {
    top: 0;
    left: 0;
    height: 100%;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1;
}
.slide-right img {
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.slide-right .hint {
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.slide-right .figcaption {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
.slide-right img {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}
.slide-right .hint {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}
.effeckt-caption {
    position: relative;
    float: left;
}
.effeckt-caption:nth-child(2n) {
    margin-right: 0;
}
img {
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
}
.figcaption {
    position: absolute;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    width: 100%;
}
/* hint */

JavaScript

$('.contain').each(function() {
    
    var $contain = $(this);
    
    $contain.on('click', '.hint', function () {
        var isMSIE = /*@cc_on!@*/0;
        var $caption = $contain.find('.effeckt-caption');

        if (isMSIE) {
            $caption.animate({
                left: "300px"
            }, 500);
            setTimeout(function () {
                $caption.animate({
                    left: "0px"
                }, 500);
            }, 2E3);
        } else {
            $caption.addClass('slide-right');
            setTimeout(function () {
                $caption.removeClass('slide-right');
            }, 2E3);
        }
        return false;
    });
    
});