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>