Streaming live at 10am (PST)

How to reveal another image on hover

Hey im super new to web flow. I’m trying to reveal an giphy when the user hovers over a static image. I’ve had no problem with that part but when i then hover out it still stay as the moving giph!

can anyone help?

In the animation panel for Hover, there are TWO animation triggers. Scroll down or collapse your “on hover” panel to find the “hover out” trigger. Just add your animation there (hiding the gif, I guess)

Thanks so much! That helped do you know how to layer images? So I can “hide” an image behind another :slight_smile:

The only way to hide one image behind another it to give one a higher z-index. But to do that, the images must have a position set to Relative, absolute or fixed, or must be inside a parent that has that position.

However, I would not recommend that (for a number of reasons). It is better for you to only show one image, and hide the other (the one “under” it). Then on hover, you hide the top one, reveal the one under, and on hover out, the other way around.

Famous way. Two images one on top of another (add wrapper position relative and one image position absolute). You should use same image size.

Another simple way is to change the background image on hover (not by interactions)