Join Join
Join

108Side thumbnails navigation

In this effect, we'll hover a list. Thumbnails fan out on both sides of the active line and moving the pointer horizontally browses media on both sides of the active line. Let's go!

HTML Structure

The structure splits into two parts. First, a vertical list of labels the user will hover over:

<section class="mwg_effect108">
    <p>What we do</p>
    <ul>
        <li><span>Branding</span></li>
        <li><span>Strategy</span></li>
        <li><span>Design</span></li>
        …
    </ul>

Next, a gallery of thumbnail slots. Each media div holds a stack of images — one photograph per line, rotated so every tile can show the right preview:

    <div class="medias">
        <div class="media">
            <img src="./assets/medias/1.png" alt="">
            <img src="./assets/medias/2.png" alt="">
            …
        </div>
        <div class="media">
            <img src="./assets/medias/2.png" alt="">
            <img src="./assets/medias/3.png" alt="">
            …
        </div>
        …
    </div>
</section>

The first half of the slots will sit on the left of the title, the second half on the right. We'll position them all in JavaScript.

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

See how the platform works: try our free effects.

Try it now Try it now

(No registration or credit card needed)