Join Join
Join

114Cover flow

In this effect, we will arrange a set of cards in a cover-flow. As the cursor moves across the stage, one card comes to the front while the others fold away with a tiny bounce. Ready? Let’s dive in!

HTML Structure

The structure here is relatively simple. A container holds every card, and each card wraps its image inside a content division:

<section class="mwg_effect114">
    <div class="container">
        <div class="card">
            <div class="content">
                <img src="./assets/medias/01.png" alt="" class="media">
            </div>
        </div>
        <div class="card">
            <div class="content">
                <img src="./assets/medias/02.png" alt="" class="media">
            </div>
        </div>
        …
    </div>
</section>

That inner content is what we will tilt later, while the card itself only slides sideways. We can add as many cards as we like: the script will split the stage into one strip per item.

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)