JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div class="item">
    <div class="content" onmouseenter="over(this)" onmouseleave="out(this)">
        <div class="image">
            <img src="http://aranciamato.it/wp-content/uploads/2013/09/insetti-700x250.jpg" width="300"/>
        </div>
        <div class="text">
            Some useful content
        </div>
    </div>
</div>

CSS

.item {
	position: relative;
	width: 300px;
	height: 107px;
	overflow:hidden;
}

.item .content {
	position: absolute;
	top:0;
	left:0;
	width: 600px;
	height: 107px;
}

.item .content .image {
	position:absolute;
	top: 0;
	left: 0;
}
.item .content .text{
	position:absolute;
	top: 0;
	left: 300px;
	width: 250px
}

.item {
    border: 1px solid black;
}

JavaScript

function over(element) {
    $(element).stop().animate({left: "-250"}, 200);
}

function out(element) {
    $(element).stop().animate({left: "0"}, 1000);
}