Streaming live at 10am (PST)

Hover interaction transition problems


#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:

Hover-in Settings:

Hover-out Settings:

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


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

src="/uploads/webflow1/original/2X/5/5c58fb195b519852363dd9e2ab6626d3d3d6ba6c.png" width="229" height="500">


#2

Hi @aks, thanks a lot for the good question. Could you help to share the read-only link to the site: http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link 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...


#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:

Can you try again? Also, for this type of layout, I would choose a tab component:
http://help.webflow.com/lesson/tabs


#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:


#14

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


#16

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