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.