Streaming live at 10am (PST)

Basic Hover Interaction Animations in Webflow


#1

HI.

I wanted to have something like this incorporated into my website so that when people hover over our products they can see product name and details:

https://www.bloc.io/tutorials/webflow-tutorial-design-responsive-sites-with-webflow#!/chapters/698

I followed the tutorial above, but must have missed something, because I want to apply the exact same type of animation, but mine’s not working.

Please help! Thanks. My website link is below, as well as a screenshot of the site when it loads, and how I want the 'rollover graphic' to work. The place where I tried to apply it is in the ‘jewelry’ category under ‘Fruit for Men’ collection. Unfortuantely, you can’t really see any hover effect while rolling over the image. I am using Google Chrome web browser.


https://preview.webflow.com/preview/california-custom-design?preview=5a6437f3c10575519a9cf067e4558222


#2

Okay, now I got it to work, I realized I didn't have the original image inside of a 'div block' so when i had 'limit to nested elements' checked, it wasn't nested, so it didn't work. Now the problem seems to be turning the outer div block into a mask so that the sliding image on the rollover appears only within the box, instead of seeming to come from the bottom of the page or below the image slider. Thanks!


#3

Ok, i figured it out and got it to work the way I want.


#4