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:

036
Stacking images on hover

To make a paragraph more engaging, we will here make images scroll when hovering over certain words. The images will change quickly and position themselves randomly, as if we were dealing cards. Let’s get started, let’s code!

HTML Structure

The structure here is relatively simple. We’ll just load all the images we want for our effect and define the words that will trigger the animation:

<section class="mwg_effect036">
    <p class="sentence">We create bold and <span class="hover">audacious</span> clothing that empowers <span class="hover">individuality</span></p>
    
    <div class="medias" aria-hidden="true">
        <img src="./assets/medias/01.png" alt="">
        <img src="./assets/medias/02.png" alt="">
        <img src="./assets/medias/03.png" alt="">
        ...
    </div>
</section>

Join Made With Gsap to
unlock the full tutorial

Get access