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.
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
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)
hi @elena-sabrina ok now we are getting closer 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.
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:
@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.
so effect in not on 
