Streaming live at 10am (PST)

Text show on hover not working properly

Hi Webflow community!

I’ve animated my cards to have a dark overlay and white text appear on hover. When not hovered, there shouldn’t be anything that shows other than the plain card.

  1. When I got to my public share link, the animation (all of it) doesn’t work until I tap into edit and then back to preview. Why is that? You can see that there is some motion with my corners.
  2. When it does work, the white text seems to load in joltingly. It seems to load halfway, and then some more. Any pointers as to how I can fix this not smooth appearance?

Thanks so much! Learning so much about this tool but struggling with some of the details. I have no coding background. Would appreciate any leads.


Here is my public share link

Your text and overlay have opacity set at 0% in the designer. This is not required here. Since you are using the animation to change the opacity, you only need to set your opacity in the animation as you have done using the initial state option. You also have a transition set for your overlay which can be removed.

image

And I would put your text inside of your hover overlay background, and remove your absolute position. This will allow for smoother transition, as they were loading simultaneously and over each other, which resulted in that jolty appearance.

image

Hope that helps.

1 Like

WOW, YES. Thank you, Drew! That’s amazing.

Can you help me understand the concept behind putting the text inside of the card hover? Is that just to sync them together for the transition?

I’m also confused by how if the text is nested inside of the background, why the opacity of the background doesn’t then apply to the text? (the text still shows as pure #FFFFFF)

1 Like

Gotcha, didn’t realize you wanted the overlay to cover the text too.

  1. Don’t nest them as I specified, but move the hover background above the card description all within the card div
  2. Set the card Position to Relative.
  3. Set the card hover bg Potistion to Absolute
  4. Set the card hover bg Z-Index to 100
  5. Set the card hover bg width and height to 100%
  6. Set the card description Position to Static

Also make sure in your interaction op both hover out and in, that you have the duration of the background and description both the same, otherwise it may jolt a little bit too.
:grinning:

Thanks, Drew! So educational. I really appreciate it.