Start learning now
Get started

Thank you for your interest and welcome!

We’ve just sent you an email! Check your inbox (and spam folder) and save our email so you don’t miss what’s next!

Meanwhile, rendez-vous here:

035
Smooth thumbnails

This grid makes it easy to showcase products or projects. The effect expands the hovered row and displays the items of that row. The movement of the expanding row happens simultaneously with the shrinking row, ensuring that the overall component maintains the same height at all times.

HTML Structure

Let’s start by looking at the structure of the DOM. It’s quite straightforward here. We have a list, and each li will represent a row in our component.

<ul>
    <li>
        <span>Lamps</span>
        <span class="medias">
            <img class="media" src="./assets/medias/01.png" alt="">
            <img class="media" src="./assets/medias/02.png" alt="">
            ...
        </span>
    </li>
    <li>
        <span>Chairs</span>
        <span class="medias">
            <img class="media" src="./assets/medias/06.png" alt="">
            <img class="media" src="./assets/medias/07.png" alt="">
            ...
        </span>
    </li>
</ul>

Join Made With Gsap to
unlock the full tutorial

Get access