JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="effeckt-caption">
    <div class="hint">Hint?</div>
    <img src="http://placehold.it/300x200" alt="" />
    <div>
        <div class="effeckt-figcaption-wrap figcaption">
             <h3>Half Slide</h3>
            <p>Lorem ipsum dolar.</p>
        </div>
    </div>
</div>

CSS

/* hint */
.effeckt-caption[data-effeckt-type="half-slide"] .figcaption {
    top: 0;
    left: 0;
    text-align: center;
    height: 100%;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}
.effeckt-caption[data-effeckt-type="half-slide"] img {
    display: block;
    position: relative;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
}
.effeckt-caption[data-effeckt-type="half-slide"]:hover img, .effeckt-caption[data-effeckt-type="half-slide"]:active img {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.effeckt-caption[data-effeckt-type="half-slide"]:hover .figcaption, .effeckt-caption[data-effeckt-type="half-slide"]:active .figcaption {
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}
.effeckt-caption {
    position: relative;
    float: left;
    overflow: hidden;
}
.hint {
    position: absolute;
    top:0;
    left:0;
    z-index:1;
}
.effeckt-caption:nth-child(2n) {
    margin-right: 0;
}
.effeckt-caption img {
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
}
.effeckt-caption .figcaption {
    position: absolute;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    width: 100%;
}
/* hint */

JavaScript

$('.hint').on('click', function () {
    $('.effeckt-caption').attr('data-effeckt-type', 'half-slide');
    setTimeout(function () {
        $('.effeckt-caption').removeAttr('data-effeckt-type', 'half-slide');
    }, 2E3);
    return false;
});