Hello!
I’m very new to webflow and trying to figure out interactions. I’m a designer and only have basic knowledge of css - so I might not be using some of the terminology correctly.
I’m trying to achieve an effect, where an image (see screenshot) appears on hover (over the area of the image), and disappears when the cursor is moved away from the image. I want this effect to apply to a grid of images, so that only 1 image appears at a time, when the cursor hovers over that image.
I’ve tried to achieve this effect by creating a grid, then adding a div to each box in the grid, and adding the images within those divs. Then I added an element hover interaction to the div, with the action “start animation” and then “hide/show” to the image in the div. I set the initial state of the image to “hide”.
My issue:
the “on hover” animation only seems to work when the cursor hovers over the left 1/4 to 1/3 of the image (approximately). The “on hover out” seems to work whichever direction the cursor leaves the image area.
I thought this might be due to the div “shrinking” when the image is hidden, so I set its width to 200px (the width of the image), but that doesn’t seem to fix the issue.
Or is it a glitch? Because when I scroll down to the second collection list item, it suddenly works when hovering from any direction. Could it be linked to the BG image that has a scroll interaction? Help!
Question:
To apply this interaction to each of the 6 images in the grid, do I need to create a separate “start animation” for each image? Or is there an easy way to apply this same interaction for each image? I tried using the “class” instead of “element” setting in the animation itself, but couldn’t get that to work for each image individually, as the triggered element remains the same (first) image, instead of the images within each of the other divs.
Side issue:
EDIT: I just realized this issue isn’t a problem once I preview the site, only in the editor
Not sure if this is the right part of the forum to add this (please let me know if I should create a separate topic elsewhere for this issue):
The div labeled “pop-up window 200x250 right” is supposed to start out 40px from the top of it’s parent (the collection item), and then become sticky as one scrolls down the page, until scrolling past the collection item (should stick to collection item when the box reaches 20px from the bottom of the collection item).
The effect was working correctly, until I added the grid (with the 6 images, mentioned above) to the collection item.
To show how the pop-up box is supposed to behave, I duplicated the collection list wrapper below and removed the grid.
Since adding the grid, the “pop-up window 200x250 right” div has been pushed down below the rest of the content within the collection item, instead of sitting/layering on top of it.
How do I fix this?
Appreciate any help, thank you!
Nina
Here is my public share link: https://preview.webflow.com/preview/nina-britschgi-deaa14aa1eae6afbd3f534db?utm_medium=preview_link&utm_source=dashboard&utm_content=nina-britschgi-deaa14aa1eae6afbd3f534db&preview=60ac2fdc7f1859431e7b0f31a7738efb&mode=preview
Maybe first try to learn hover interactions by simple examples (And learn how to create one animation for all “classes” - useful for buttons).