Mouse on hover interactions

hello

I’m trying to find an explanation how to transition the background image in this teaser, when scrolling over the teaser-div. And not just when scrolling over the backgroundimage-div.

More specific:
When scrolling over the “model-link-wrapper” I want to add a padding of 2em to the “teaser-image-div”.
Screenshot 2021-08-31 at 16.47.31|690x381

Thank you very much


Here is my public share link: [https://preview.webflow.com/preview/skate-d004d8-22c3c88f332339eaa0b4b77ace?utm_medium=preview_link&utm_source=designer&utm_content=skate-d004d8-22c3c88f332339eaa0b4b77ace&preview=fdd2e514d2961a72e6f64eb7b884c368&workflow=preview]

hi @elena-sabrina and welcome to forum. What effect you trying to achieve? You can look on interactions while scrolling in view or scroll into view and look on “move”, “scale” or …

As I don’t know what is your goal and you are mentioning background image and padding you may look on this specs.

but for this you will need to use intersection observer

hey @Stan

Yes I do. I meant margin, my mistake. I now illustrated the effect I’m trying to achieve on the example. When a user hovers over the image there’s some kind of zoom effect (achieved by changing the margin -not padding- of the parent of the background image)

https://preview.webflow.com/preview/skate-d004d8-22c3c88f3323-d6d11f61643dc?utm_medium=preview_link&utm_source=designer&utm_content=skate-d004d8-22c3c88f3323-d6d11f61643dc&preview=219525a09f9995f800a90857e9421fe4&workflow=preview

hi @elena-sabrina ok now we are getting closer :wink: so effect in not on scroll but on hover. Correct?

If yes, should image wrapper stay unchanged size and zoom should be applied only on image?

if yes, you should use on image wrapper overflow:hidden and use standard image element.
then you add interaction on mouse hover to wrapper and as traget set your image. On this image you will apply scale.

Don’t forget to apply animation back to basic size on mouse out

Is this you looking for?

Or is your goal EXACTLY the as is lottie example?

Edit: I just make short video in case my written explanation wasn’t clear enough.

Hello @Stan

Thank you for this amazing explanation including the video. I’m very new at Webflow and it did help a lot.

If I may: What if I wanted to change something on hover that I don’t have access to within the interaction tool. For example, if I have a teaser with copy to the left and a red box to the right and I wanted to change the color to the right to red like this html&scss example:

HI @elena-sabrina please follow basic forum rule to keep only questions to be related to original topic so another users can find solutions easily.

Anyway, to create these mouse events you can use javaScript as mouseover or mouseenter depend what you need as there is slight difference in bubbling.

If your issue doesn’t persist and you do not have further questions related to original topic feel free to close your request as solved.

have a great day

@Stan Thanks I marked the question as solved. I didn’t mean to add another question. My question was how to access a hover state of a child from the very beginning. As you showed me a solution without using the “on hover” transition but an “on hover” interaction I just wanted to ask for a solution for another use case where this is not possible. But i guess in this use case I’ll then have to use an “embedded” element and add the code.

Thank you very much for the help

1 Like

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