Reveal Image on Hover: Active Hover Area exceed the div because of the large image

Hi! I want to do an effect that the image is revealed when the mouse hovers over the Row (From [Screenshot 1] to [Screenshot 4]). I put the image inside the Row div because I want to make the Row div a symbol for reuse(Screenshot 2). But right now when my mouse hasn’t gone into the row div area(where I set the hover animation), the image is already revealed as the mouse is within the image area (Screenshot 3). But that doesn’t make any sense. Why would people see the image even before they hover into the row? So I want to prevent the hover effect in [Screenshot 3] from happening and only allow the hover effect in [Screenshot 4].

Screen Shot 2021-07-14 at 2.01.59 AM

Another small question is: Why does the hover state always show by default when I preview?

I know these might be some silly questions, but PLEASE HELP! This has confused me for days… Will really appreciate it if anyone could tell me how to fix it!!!

Here is my public share link: Webflow - Design Help

Please supply read-only share link to your project’s Designer interface:

Oh yes! Just did! Thank you for the reminder

Hey @Yunboi, the issue is due to the image wrapper's visibility.

  1. Set Image Wrapper's display: none

  2. Go to your interaction’s and on mouse hover add the following:

  3. on mouse hover out, add the following:

This will now work as intended for you, hope this helps!
screen-capture (1)

1 Like

It worked!!! Thank you sooo much! You saved my day

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