Hover interaction transition problems

Design help Animations & Interactions
1

I’m having some trouble with the hover in and out transitions

  1. My hover in transition (ease) works fine on Safari but not on Chrome
  2. My hover out transition (ease) does not work on any browser

Interaction:

492×940 51.5 KB

Hover-in Settings:

498×1086 27.5 KB

Hover-out Settings:

490×1086 27.4 KB

Any help would be much appreciated! Thank you in advance.

Here is my public share link: LINK
([how to access public share link][2])

[2]: How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow

2

Hi @aks, thanks a lot for the good question. Could you help to share the read-only link to the site: Share a read-only link | Webflow University and also take a screenshot of the element set with the hover interaction?

3

Here is the read-only link: https://preview.webflow.com/preview/cornellvc?preview=bc7500197fd1133c5d6614667354bd69

This is the element that shows/hides the text block under it when hovered over:

4

Hi @aks

Can you reupload your screenshot? It doesn’t seem like it was uploaded correctly.

5

That’s the correct screenshot. It’s just the placeholder image to be replaced by another image later. Can you see this?

Thanks!

6

This is all we see…

1946×1734 164 KB

7

Sorry, I’m probably misunderstanding. The image of the camera i.e. the image placeholder, is currently on my site and when you hover over it, it triggers the show/hide interaction for a text block. What should I be taking a screenshot of instead?

To maybe help, I’ve replaced the image of the camera with the following:

Are you able to find this element under ‘Team’ section on my site?

9

Oh, I think now I see the “space” picture…will see what the problem is…

11

I don’t see the photo icon:

916×522 1.14 MB

Can you try again? Also, for this type of layout, I would choose a tab component:

12

So I changed the photo to the space image. So the left-most image in the gif you’ve posted above. When hovering over it, the text block under appears/diasppears but the transition isn’t smooth.

Also I’ll look into tabs, but can tabs have images and look the same as the grid of images that I’ve created above?

13

Hi @aks

It is impossible to have a smooth transition when going from Visible: None to Visible: block

Here is a video tutorial on how to hopefully solve your problem:
http://quick.as/d8pVIenqG

Hope you get it working :wink:

1 Like
14

That looks great, thank you very much for your help!

1 Like
16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.