Join Join
Join

113Hydra Hover

We're in our Odyssey era: remember the Hydra, the mythical creature that grows two heads whenever one is cut off? We brought that idea to the cursor: hover over a piece of media, and it splits in two!

HTML Structure

The structure is relatively simple. A hidden medias division holds every source image we will pull from at runtime:

<section class="mwg_effect113">
    <p class="text">Mosaic</p>
    <div class="medias" aria-hidden="true">
        <img src="./assets/medias/01.png" alt="">
        <img src="./assets/medias/02.png" alt="">
        <img src="./assets/medias/03.png" alt="">
        …
    </div>
</section>

The images inside medias never appear on screen directly. They act as a pool the script draws from each time it needs a new floating tile. Loading them in the HTML also means they are ready immediately, with no delay when we spawn a tile.

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)