Join Join
Join

093Letter Image Swap

In this fun little effect, hovering over a letter reveals an image in its place. The surrounding letters slide apart to make space, then ease back together with a soft wobble when the image disappears. Let’s see how it works!

HTML Structure

We place a single word that will be split into letters, plus a hidden stack of photographs the script pulls from on demand. Keeping the sources offstage lets the browser preload them while the visible line stays typographic:

<section class="mwg_effect093">
    <p class="word">Celebrations</p>
    <div class="medias">
        <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="">
        …
    </div>
</section>

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)