JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
    <img src="http://dummyimage.com/200x125/000/000" alt="" width="200" height="125" class=".img" />
    <h2>Sliding text</h2>
</div>

CSS

body{
    background: #343434;
}
h2{
    font-family: Arial;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: -100px;
    width: 100%;
}

.image{
    position: relative;
    overflow: hidden;
    width: 200px;
}

JavaScript

$(document).ready(function() {
    var h2_w = $('h2').width();

    $('.image').hover(function() {
        $(this).find('h2').animate({
            left: 10
        }, 275);
    }, function() {
        $(this).find('h2').animate({
            left: h2_w + 200
        }, 275,function(){ $(this).css('left',-100)});
    });
});