002
Images following cursor
In this effect, we’ll scroll through images inside a mask that follows the cursor. The distance traveled by the cursor will determine when the next image is displayed. Ready? Let’s dive in!
HTML Structure
The structure here is relatively simple. The images will be contained within a mask that follows the user’s cursor.
<section class="mwg_effect002">
<div class="card">
<div class="medias">
<img class="media" src="./assets/medias/1.jpg" alt="">
<img class="media" src="./assets/medias/2.jpg" alt="">
<img class="media" src="./assets/medias/3.jpg" alt="">
...
</div>
</div>
</section>