Join
Join

041Dynamic hover

In this effect, each sentence will animate when hovered over by the user's cursor. But that's not all! To maximize the fun, the movement will propagate letter by letter, from the center outward, starting from the first letter hovered. Let’s get started!

HTML Structure

Each animated sentence consists of a visible version and a hidden duplicate.

<ul class="content">
    <li class="item">
        <span class="hidden">Get back Jamie</span>
        <span class="visible">Get back Jamie</span>
    </li>
    <li class="item">
        <span class="hidden">Deadly 60</span>
        <span class="visible">Deadly 60</span>
    </li>
    ...
</ul>

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)