How To: Image on mouse hover klick button ? Help!

Hi everyone!

I am creating a website that I’ve designed in Adobe XD. In that design there is an animation when I hover over a button. See the gif:

I have seen some tutorials on how to reveal something (like: Create an animated text overlay on an image on hover | Webflow Blog and Reveal on hover | Webflow University)

The second source seems close to what I am searching for, except I am trying to put an Image over text and at the same time I need the word ‘glue’ to stay visible. On top of that a button should reveal to bring you to the next page.

Does anyone know how I can recreate this in Webflow?

I have basic knowledge of coding (html/css/java) in case anyone was wondering.

Kind regards,

Hi Ghislaine! Welcome to the forum. I wonder if it would just be easiest to duplicate the text you want to remain in place and place it under the ‘Click’ element using z-index positioning. Have you tried this?

Hi there Chris! Thank you for you answer. Do you maybe have a tutorial or reference page I can visit to follow along? Not sure how to get there with the basic knowledge I have…

Kind regards

Sure. Check out these lessons on the Webflow University: Positioning and Interactions

I built a very quick & crude sample page for you to get an idea of what I mean. Essentially, I have my ‘base’ Div and ‘image’ Div right on top of each other, with the same text inside. Inside of the div that has the image, I have a third div with my button. This setup allows me to use flexbox positioning to center everything, and the structure takes care of the element stacking.

After that, I simply have an interaction that fades in/out the div containing the image on hover. Here’s a link to that project page. Hope this helps.