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: Webflow - Design Help