Start learning now
Get started

Thank you for your interest and welcome!

We’ve just sent you an email! Check your inbox (and spam folder) and save our email so you don’t miss what’s next!

Meanwhile, rendez-vous here:

030
Images 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>

Join Made With Gsap to
unlock the full tutorial

Get access