JSFiddle - React, Tailwind, and code Playground

by Mikel

HTML

<div id="i01" class="cuadro">
    <a href="#i01">
        <img src="http://www.educaplaying.com.mx/prods/mesa%20cuadrada1%20copy.jpg" alt="">
        <a href="#">
            <div class="texto">
                <p>Mesa</p>
            </div>
        </a>
    </a>
</div>
    <div id="i02" class="cuadro">
    <a href="#i02">
        <img src="http://www.educaplaying.com.mx/prods/mesa%20cuadrada1%20copy.jpg" alt="">
        <a href="#">
            <div class="texto">
                <p>Mesa</p>
            </div>
        </a>
    </a>
</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:target img{
    top: 0;
    left: -150px;
}