Join
Join

035Smooth 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>

Become a member to unlock
the full effect today.

Join now

Discover the platform

See how the platform works: try Effect #000 for free.

Try it now

(No registration or credit card needed)