002Images following cursor

In this effect, we’ll scroll through images inside a mask that follows the cursor. The distance traveled by the cursor will determine when the next image is displayed. Ready? Let’s dive in!

HTML Structure

The structure here is relatively simple. The images will be contained within a mask that follows the user’s cursor.

<section class="mwg_effect002">
    <div class="card">
        <div class="medias">
            <img class="media" src="./assets/medias/1.jpg" alt="">
            <img class="media" src="./assets/medias/2.jpg" alt="">
            <img class="media" src="./assets/medias/3.jpg" alt="">
            ...
        </div>
    </div>
</section>

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)