Override images in interactive components/variants with zoom effect on hover

[vkialka]

Trying to override images so that the image zooms in on hover, but all it does is show the original image from the hover variant. Any ideas? Tks!!

[Simon_Dunford]

I have the same issue… My thinking is the bug happens because my image hover state is a component nested inside another component… I don’t want to detach but this might be the only solution for now? Let me know if you found a workaround.

[tank666]

Is there a way to make zoom in on hover effect for images?

Hi @Pavel_Guzenko, it’s very easy to do it. Create two components: 1st — default state; 2nd — with an enlarged image. Combine them as variants. Create a “While hovering” interaction using an “On change” action between variants. Add an instance of this component to your frame and run the prototype. If you need a file, let me know.

Is there a way to make zoom in on hover effect for images?

I made an example for you. Duplicate this file to see how it works. Design file: Prototype:

[vkialka]

@tank666 this works fine as long as you don’t override the images. Or could you figure this out as well?

[tank666]

Have you looked at the file I linked to in the post above? Because it has no problems with overrides.

[Karen25]

Hey @tank666 thanks for sharing your example. I’ve been facing the same issue as @vkialka. I did look at your file and tried to fix mine based on yours but no luck. I’m able to replace the default img (‘resting’ state in my case) but when I hover, it keeps showing the original one (the one I created the component set with). I’ve also tried changing the image by viewing the component’s “hover” state - but when I view it in presentation mode, the result is the same. I’ve also tried adding a instance swap property and setting the img to it. The default state img changes but on hover it shows the original one only. Here’s my example https://www.figma.com/file/UAH25ZvNQEdyUg6a5sd1vX/Example?node-id=0%3A1&t=GKZZytvSJwBLM8gc-1

Thanks for any ideas on how to fix it.

[tank666]

I looked at your file and noticed a difference in the images in variants: one of them you changed the fill mode (crop). Instead, scale the image and place it in a frame with the “Clip content” property turned on.

[Karen25]

hey @tank666 it worked. Thanks a lot for the help

[vkialka]

Tks so much @tank666. It does work as long as you don’t work using aspect ratio images. But tks!!

[vkialka]

@Tank found a workaround!! Tks for your help

[vkialka]

@tank666 @Karen25 @Simon_Dunford so here’s a file if you guys are interested:

Figma

[yanir_shukrun]

try use in the main component blank image place holder.
for example https://www.figma.com/file/7iVbMK4ErjDHZg6kMBewcR/fix-image-issue?t=lDe4lRrXnEjGniq0-1