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>