Join
Join

030Images on hover

In this effect, we will make an image appear when hovering over an item in a list. The image will animate within a mask that follows the user's cursor position along the Y-axis. Ready? Let’s dive in!

HTML Structure

The DOM will be composed of three different parts: the list of items the user will hover over, the images to be loaded, and finally, the division where the project-related image will appear

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
</ul>

<div class="medias" aria-hidden="true">
    <img src=".../assets/medias/1.png" alt="">
    <img src=".../assets/medias/2.png" alt="">
    <img src=".../assets/medias/3.png" alt="">
    ...
</div>

<div class="media-container"></div>

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)