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?
Here is my public share link: https://preview.webflow.com/preview/shiqians-marvelous-project?preview=5294132ce3357d3f801bd986162df092