Streaming live at 10am (PST)

Text image hover effect


#1

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,


Popups over diagram
#2

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

#3

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


#4

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:


#5

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

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

38


#6

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