Use Image Zoom function more then once on the same page

Dear Webflow Coimmunity

We have just added a very cool Image zoom on our Page.

Problem is, we have 7 different images on this page and maybe use this zoom function on other pages too.

If we copy the element (img-doc-zoom-div) and change the image on the right-hand side, it will also change the original DIV.

If we copy the element, and replace the div Names. i still can’t add new animations. It always picks up the animation from the first image.

The First image is working as it should!

How can I copy this element (img-doc-zoom-div) and just swap the image that has to be zoomed?

Could you provide your project share-link?

btw… welcome to the community :partying_face:

Hallo Martin

Thanks for welcoming me… Sorry here is the correct link
https://preview.webflow.com/preview/edoobox-dev?utm_medium=preview_link&utm_source=designer&utm_content=edoobox-dev&preview=6e920f4de609fdf754aa46f0fb394010&pageId=605acdd3d54834fbf0f0a8d2&itemId=6102a4b73ac0cb236ad37f65&workflow=preview

Great that you can help

Best Regards
greg

Thanks for the share link.

I found a solution that should work for this:

  1. First, give the same class to every div that contains images with this animation (red circles) and give the same class to all images that should be animated (green circles):

  1. Then go to the hover-animation settings of the div. Set it to “Only children with this class” (red circle). Watch out: As soon as you change it to “Only children with this class”, the class that is shown right above the dropdown will change to a random class. Just type in the class “image-big” and you’re fine.

  1. Next go the div of the second image and activate the same animations (“hover animation” and “mouse move over element”) that you use for the first image.

Now the animation will only affect the image inside the div that triggers the animation.

If you need further help, feel free to ask.

Beste regards
Martin

1 Like

Wow thanks a lot. That works… the Problem was, that the Setting on the Hover was not set to “Only children with this class”

https://preview.webflow.com/preview/edoobox-dev?utm_medium=preview_link&utm_source=designer&utm_content=edoobox-dev&preview=6e920f4de609fdf754aa46f0fb394010&pageId=605acdd3d54834fbf0f0a8d2&itemId=6102a4b73ac0cb236ad37f65&workflow=preview

One small thing: If I load the page (Not in preview mode) online live, the hover over the image don’t work at first. If I click it and then close the light box the hover zoom works. Any idea why this is like that?

PS: Is there an option to pay / donate for the support?

Glad I could help.

When I test your live site, the hover animation works right away. I tested it on chrome, firefox, safari on mac.
Does the problem still occur?

PS: No need for a donation, thank you very much :wink:

1 Like

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