JSFiddle - React, Tailwind, and code Playground
by Joanna Sobańska
HTML
<div class="container">
<img src="http://joanna-sobanska.pl/animak/images/pasta_package.png" alt="">
<div class="textbox">
<p class="text">TEXT</p>
</div>
</div>
CSS
.container {
position:relative;
overflow:hidden;
width:400px;
height:700px;
}
.container .textbox {
position:absolute;
top:0;
left:0;
width:200px;
height:150px;
margin-left:-210px;
}
.container:hover .textbox {
margin-left:0;
}
.container img {
margin-left:0;
}
.container:hover img {
margin-left:210px;
}
.text {
padding-top: 50px;
}
.container img, .textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}