Streaming live at 10am (PST)

Recreating a thumbnail interaction


I’m a newly so apologies if the answer is obvious.
I’ve created a site in Muse and used a fluid gallery widget with thumbnails.
I want to recreate the same menu design in web flow - I’m sure its possible given the amount of parameters that can be changed using transitions.

But its doing my head in! I just can’t seem to get it right.

Here’s the animation I want to achieve on mouse rollover and rollout:

Here’s my effort in web flow so far

I’ve copied this tutorial to get the basics but it’s not in depth enough to do what I want to achieve.

Any help would be greatly appreciated.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Oh, good question @danielcobb.

Could you share your Read-Only link? I’d be happy to take a look at your project.


Here’s the read-only link


1 Like

@danielcobb Thanks for the share link.

The steps I took to make the interaction work as expected is as follows:

First, I removed the hover state. Then, I started to create the interaction with IX2

The “Hover On” step includes making the opacity of the “thumbnail text” to 0% and moving both text off screen 125% initially. Then, moving the opacity and text position back to it’s original state:

Lastly, the “Hover Off” step includes moving the text to the left 125%, and moving the opacity of “thumbnail text” to 0% opacity:

Definitely feel free to let me know if you have any questions.

You can view the working interaction at the following URL:

I’m going to be offline for a quick sec, but don’t hesitate to reach out. I’ll respond as soon as I can.

Hopefully this helps :nerd_face:

  • Micah

Wow, thank you so much for taking the time to work it all out.
I really appreciate it. I’ll try it out and let you know how I get on.

Thanks again. Great support.

1 Like

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