Skip to main content
Question

Please help - Trying to create a zoom effect on hover

  • March 30, 2022
  • 1 reply
  • 1073 views

Jay20

Please help. I’m trying to create a zoom effect when hovering over a map image, so it transitions to a larger, zoomed in image. Ideally I then want the zoomed image to be scrollable also.

See attached screen shot. I’ve created the regular map image as a component, and the larger zoomed image as a component, then combined both as variants. I’ve added an interaction of on hover > change to > the larger image.

The problem I’m having is when the interaction happens, the larger image isn’t centered (so it seems to opens the top-left of the image). Is this because I haven’t cropped the larger image to be the same size as the standard image? How do I do this please? I also want the zoomed image to be scrollable, is this possible with a variant?

Any help greatly appreciated! Many thanks.

1 reply

Aspirin_Creativa
  1. Nest the image inside a frame.

  2. Create a component from the frame and image combination.

  3. Add a variant to the component.

In the new variant, scale the child of the frame (the image) to your preference.

Create a prototype using the modified component.

Figma – 23 Dec 22

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings