Zoom In Picture Component

Forum|Forum|1 year ago
February 20, 2025
6 replies
1745 views

Hi, I’m quite new to Figma and I have a question. I’ve made a zoom in picture component for products but anyone know a better way to do without making every single component for each product? Whenever I change other product’s images it always zoom back to the original image while hovering.

This topic has been closed for replies.

Best answer by iago

You're using the the image propriety (fill x crop) to make the growing effect. Instead, wrap the image in a frame (cmd + option + G), set it to "clip content" and the image constraints to scale. Make sure to do it in both component states and that the frame has the same name on both.

Lastly, change the size of the image on your hover variant. For change the image on the instances, do as shown in the video I've shared.

Nellya

Power Member

Hi. Can you share a screenshots of your main component and its variants or provide a link to your file? If the original image goes back while hovering, often there is a problem in structure or layer naming in the main component.

iago

New Participant

I think this may help you. Create the variants of the component (default and hover) and change the image on each instance

Hoa NguyenAuthor

New Member

Hi. Can you share a screenshots of your main component and its variants or provide a link to your file? If the original image goes back while hovering, often there is a problem in structure or layer naming in the main component.

Hi! Thanks for the reply, here’s a link of my prototype and I hope you’ll help me on figuring out this problem. Thanks a ton!
Prototype

iagoAnswer

New Participant

You're using the the image propriety (fill x crop) to make the growing effect. Instead, wrap the image in a frame (cmd + option + G), set it to "clip content" and the image constraints to scale. Make sure to do it in both component states and that the frame has the same name on both.

Lastly, change the size of the image on your hover variant. For change the image on the instances, do as shown in the video I've shared.

Hoa NguyenAuthor

New Member

You're using the the image propriety (fill x crop) to make the growing effect. Instead, wrap the image in a frame (cmd + option + G), set it to "clip content" and the image constraints to scale. Make sure to do it in both component states and that the frame has the same name on both.

Lastly, change the size of the image on your hover variant. For change the image on the instances, do as shown in the video I've shared.

omg i did it thank you so much, you’re a life saver!!!

iago

New Participant

For future reference:

Sign up

Login with SSO

Login to the community

Login with SSO