Text appear when hovering over an image?

Animations
1

I want to:
Have an image
hover over the image
image opacity goes down

i have done it up to this stage
after image opacity goes down
i want a text to appear on top of the image
I want the text to appear no matter where on the image you hover
is this possible?

2 Likes
2

Hello, Mariya! Add a Text widget on top of an image. Click Edit then Advanced Typography in the widget controls and choose Box Color to match your background. Then animate the widget: set On Hover animation and adjust it’s Opacity from 0 to 100. This way, when you hover over an image, your text will appear.

You can also copy items from our template to your own project, check this one out: Readymag template: Trickster

3

Hi ! can you explain how you made the text appearance while hovering the image similar to the example in the link?

I tried that, but for some reason if i move my cursor inside the image the opacity changes again

4

Hello! Here’s a tutorial on making text appear when hovering over an image: TikTok - Make Your Day

1 Like
5

Also, to have a clickable/link text on top of an image, you can put a button widget

  1. Change the width and height to mactch the image’s
  2. Add a link to it
  3. Add animation
  4. Set the animation to be on hover from 0 to 100
  5. Set the trigger to be the picture widget (your image underneath it) and the button itself (it will appear as “self”)

I also made this video if you want to visually see the process: https://youtu.be/a447tmwJO-o