Join Join
Join

071Grid Proximity Effect

In this effect, a grid of images responds dynamically to the cursor position — scaling up as they get closer, and shrinking as they move away. This creates a smooth, organic flow across the grid.

HTML Structure

The section is a viewport-sized shell around one grid container. Every thumbnail is a direct child image sharing the same class — we repeat the tag for each tile in the mosaic:

<section class="mwg_effect071">
    <div class="container">
        <img class="media" src="./assets/medias/1.png" alt="">
        <img class="media" src="./assets/medias/2.png" alt="">
        <img class="media" src="./assets/medias/3.png" alt="">
        <!-- duplicate img.media for each extra image -->
    </div>
</section>

On mousemove, we pan across a 2D grid — the nearer a tile sits to the pointer, the more it blooms open.

Become a member to unlock
the full effect today.

Join now Join now

Discover the platform

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

Try it now Try it now

(No registration or credit card needed)