Image Reveal on Text Hover

Image Reveal on Text Hover

·

3 min read

We'll be creating a concept for a categories section of a fashion website. The effect expresses the brand's elegance with the transitioning of the images whenever a category is hovered over.

You can view this site live here

Getting Stuff Together

We'll be using the GSAP library to handle the animations in this tutorial. I made a tutorial containing the resources of how to get up and running quickly with it that you could check out.

Let's start by writing out the categories and the pictures. This is all the HTML we'll be using. Each image has an attribute data-image which has the same value as a corresponding category with the attribute data-label. These matching values are going to determine what image is shown when a category is hovered over.

Next we'll start with styling the elements. The images would need to be stacked on each other to achieve the effect we're going for. They'll also be scaled down a bit, pushed to the back and be made transparent (we'll comment the last part out for now). After we do this, we'll switch the positions of the .images and .categories-wrapper. This was done just so we could see the categories listed out in the above pen.

If you we're wondering why the categories had a wrapper, well, it's so we could center the categories on the page and lay them out using flexbox.

One other thing to note is that, the body tag has an overflow: hidden; property attached to it, that's because we don't want the images to spill out of the viewport. If you would like that effect in a project we're .categories-wrapper would be a single section, putting in the overflow: hidden; property for that section would acheive the same result.

Now is the time to add the gsap file to the code. We'll be using gsap to move the images whenever the mouse is moved and we'll add a nice staggering motion to the images so they can flow gracefully. You can move your mouse around to explore the motion below:

Icing on The Cake

We're almost done now, so we're going to create an array of categories and loop through them. We pull the label value from data-label so we can keep track of what label is currently active. The next thing we do is attach two listeners to each category to monitor when a category is being hovered over.

On hover we make the corresponding image with the same label visible and subtly increase it's scale. We also change the z-index property of both the category name and the image to position them properly and make sure all the other categories go to the back.

After the user moves away from a particular category, the visibility is reset and so are the z-indexes back to their original values.

One more thing we'll add is a mix-blend-mode: color-burn; to the categories so that while the text is on an image, the text's blends in nicely. We can see the final result below:

Conclusion

I had so much fun making this, I hope you enjoyed it and learnt something new. There's a ton of use cases for this, I hope you can find one. Don't forget to leave a like, comment and share if you enjoyed this.

All pictures used were gotten from asos which explains the consistency among the pictures.