JSFiddle - React, Tailwind, and code Playground

by Mikel

HTML

<div class="cuadro">
    <img src="http://www.educaplaying.com.mx/prods/mesa%20cuadrada1%20copy.jpg" alt="">
        <div class="texto">
            <p>Mesa</p>
        </div>
</div>

CSS

.cuadro{
    width: 150px;
    height: 150px;
    border: 2px solid #000;
    position: relative;
}
.cuadro img{
    position: absolute;
    display: block;
    width: 150px; 
    top: 0;
    left: 0;
    transition: all 0.5s ease;
}
.cuadro:hover img{
    top: 0;
    left: -150px;
}