JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<div class="demobox">
<div id="demo-4">
    <img src="http://www.2collectcola.com/Merchant5/graphics/00000001/2MiniBottle.jpg"/>
    <div>
        <h3>Transformers</h3>
        <p>More than meets the eye</p>
    </div>
</div>
</div>

CSS

#demo-4{position:relative;}
#demo-4 img{
position:absolute;
top:0;
left:0;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-4:hover img{
margin-left:200px;
}
#demo-4 .details{
position:absolute;
top:0;
left:0;
z-index:-1;
}

#demo-4 {
position: relative;
}
.demobox {
float: left;
margin: 20px;
width: 200px;
height: 300px;
border: 2px solid #555;
overflow: hidden;
}