Image button hover effect

[newnewbie]

Hi Everyone,

I’m trying to make an image button. Ideally it would show as the right side image with a headline in the center; on hover, the background changes and new texts and a button appears. I have tried to make a text wrapper element and achieve the left effect, but I cannot figure out how to make the original text in the center (as shown in the right) disappear on hover while new texts emerge. It seems like if I make 2 elements, only one will show.

Alternatively, I could have the texts (as shown in the left) with a white-line box boarder be there from start to finish, but on hover, the background darkens, while the boarder flows (for example, it animates from one point along the line until it runs a full circle). How might I do that?

Thank you!

Newbie

Here is my public share link: Webflow - Shiqian's Marvelous Project

[Brando (Brandon Roche)]

Hi @newnewbie

Here is a video tutorial I made showing how to do this sort of hover interaction

Hope this helps!

[newnewbie]

Thank you so much Brando!

[Brando (Brandon Roche)]

​It’s my pleasure to help

[newnewbie]

Hi again Brando,

May I ask, in your demonstration, why did you set the block to be both INVISIBLE and with Opacity 0%? I tried to just set it either invisible or with opacity 0% - obviously didn’t work. But I’m curious why that was the case.

Thank you!