041
Dynamic 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>