Join Join
Join

086Cursor Insert Image Effect

In this effect, an image is revealed between two letters at the point where the cursor hovers the text line. The image expands from nothing while the surrounding letters slide apart to make space. When the cursor leaves, everything reverses. Let's build it!

HTML Structure

We start with a simple list. Each row pairs a text label with its matching image. The label and the picture sit as siblings inside the same <li>, so the script can easily reach the image from any letter:

<section class="mwg_effect086">
    <p>Teenage Engineering</p>
    <ul>
        <li>
            <p class="text">Product name one</p>
            <img class="media" src="./assets/medias/1.png" alt="">
        </li>
        <li>
            <p class="text">Product name two</p>
            <img class="media" src="./assets/medias/2.png" alt="">
        </li>
    </ul>
</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)