Streaming live at 10am (PST)

Recreating a thumbnail interaction


#1

Hi,

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: http://danielcobb.businesscatalyst.com/index.html

Here’s my effort in web flow so far http://daniels-stunning-project-767836.webflow.io/

I’ve copied this tutorial to get the basics but it’s not in depth enough to do what I want to achieve. https://webflow.com/blog/how-to-create-a-thumbnail-overlay

Any help would be greatly appreciated.


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


#2

Oh, good question @danielcobb.

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


#3

Hi,

Here’s the read-only link
https://preview.webflow.com/preview/daniels-stunning-project-767836?preview=19b13db59c7a240cae7c0730ba2bfe61

Thanks


#4

@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: https://youtu.be/azZ0hzwusdE

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

#5

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.


#6

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