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

[BP_Tara_Singh]

Can we achieve this without making two components?

[tank666]

You cannot create an interactive component with only one component because it requires at least two components (variants) in the component set.

[BP_Tara_Singh]

can you check this link: https://www.figma.com/file/qCJlIONzcjx6FfMwsGGhb8/FS-West-India-R%26R-Program?type=design&node-id=173%3A2998&mode=design&t=cdZKhGWnhL8dUZlp-1

[tank666]

Can anyone help me to understand that how this image hover effect is working without having variant

Your file contains instances of the “Product-Tile” component, the component set of which is located in another file. All interactions between variants are configured exactly in that component set from the remote file. Open that file if you have access to study in more detail.

[BP_Tara_Singh]

Yes, it is coming from product-tile but the product tile, is created for the master product tile and in that master card there is no variant. Under the image folder, there is a hover and hero image section and I am not sure how this thing changes the image.

[BP_Tara_Singh]

I am putting the master component for your reference in that file as well.

[tank666]

Please go to the “Product-Tile” component set rather than “.main/Product-tile” component and study the interactions between variants.

[BP_Tara_Singh]

Actually, .main/product-tile is the product tile I just renamed that and there is no variant