Text image hover effect

Hi all,

Has anyone managed to do the following hover effect?

  1. I hover over my name
  2. The image /or gif is displayed

Thanks,

I’ve not made one - but think you could achieve it quite easily with Interactions :slightly_smiling_face:

  • Set the image to display:none
  • Set a mouse hover ‘in’ interaction on the ‘Ryan’ text element (might need to be a span or it’s own text element - depending on your setup)
  • Choose ‘show’ and change it’s target to the image element.
  • Add any timing/easing etc
  • Then set a mouse hover ‘out’ to reverse things back to display:none again
2 Likes

Thanks!

Getting stuck here:
‘Choose ‘show’ and change it’s target to the image element.’

How do I do that part?
Sorry I’m still fairly basic with webflow :slight_smile:

https://preview.webflow.com/preview/website-4bb32c-4d3e757d57ce8edf9b7eda56?preview=44da2aea1d35b5152d2fa70d758fb3e3

Hi @ryan585

Looks like you are 50% there, and you’ve got the change target thing going! :sunglasses:

Just needs a hover out (presuming you want it to disappear when hovered away from the ‘Ryan’ ?)

A quick way to do that is on the next panel ‘On Hover Out’ duplicate that first animation, (let’s rename it ‘vanish’) then just change the image back to hidden.

Make sure 1 is set to hover in and ‘vanish’ is set to hover out and you are good to go.

Here’s some screenshots:

1 Like

Thats brilliant - thanks for your help! :slight_smile: :slight_smile:

I noticed I couldn’t add any easings? Do you know why?

38

Ah, if you need easings you could approach it in a different way using Opacity 0-100% with a delay/easing to suit :+1: