Streaming live at 10am (PST)

Help with Basic Mouse Over


#1

Hey all,

I am stuck and been figuring this out for hours. I can’t do a simple mouse interaction for a product apparel front and back effect on mouse over.

The setup is confusing me as it appears that all animations I setup are showing in the timeline? Can anyone explain the layout and how it works.

See below: Hide / Show layers is for my search bar. I got this to work.
Then adding in my hide show thumbnail is appearing in same place of timeline (why?) but they are a different elements and they appear in both Mouse over and Mouse out windows? I’m sorry I am unable to find a tutorial to show the basics of this. Help and explanation is kindly appreciated so I really understand how this works.

Kindly,
Ray


#2

Ray,

For a simple hover flip you don’t need to used interactions, just use hover states. This will reduce the code and be much more performant because you won’t need any javascript. Do you know how to do those?

John


#3

Hi J,

I don’t but I will research. It just occurred to me I can use the button widget as it’s already setup. Is this what you mean?

Thank you,

R


#4

No, just search for webflow hover state and you should see some good videos.


#5

@Lucius_Blackheart

Is this your intended result?
http://html-sandbox.webflow.io/cards-front-and-back

Watch This Tutorial


#6

No not really. I just need a simple mouse over effect when on mouse over show image B, on mouse out (default state) show image A. The button widget would work well but it doesn’t support e-commerce product image load for e-commerce.

Ray


#7

Okay I got it to work! But honestly, it’s so abstract it would be nice if there’d just be simple mouse over image swap for e-commerce product page image thumbnails for the catalogue section. Took me two days to get this and I’m not entirely understanding yet how I got it because it’s setup is abstract. But I will get there.

Thanks for your help guys,
R