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

[Yunboi (Yunbo Xie)]

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].

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: https://preview.webflow.com/preview/portfolio-07d4c7-7028fb3559ab72a3c48770?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-07d4c7-7028fb3559ab72a3c48770&preview=2107329d617dafd0dbc0e4dc421f30ac&workflow=preview

[spirelli]

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

Share a read-only link | Webflow University

[Yunboi (Yunbo Xie)]

Oh yes! Just did! Thank you for the reminder

[imtiazraqib]

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!

[Yunboi (Yunbo Xie)]

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