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

Please look at the screenshot above. Do you see the Variant interactions section (Hover interaction)? This means that the instance inherits interactions from the variant that is in the component set.

Yes, this hover interaction he gave to provide shadow to the card but still let’s suppose that is the case why is he using hover and hero image in inside the one card? What is the usage of that? If we detach the hover and hero then you will find that the hover interaction is not working.

That is the big problem which i am unable to solve.

This interaction is designed to change the display of images (by changing the opacity of the “Hover” and “Hero” layers in the corresponding variants), as well as to add a shadow.

Since the hover effect uses two different images, they need to be stored somewhere. In one layer there is a default image, in the other—on hover.

Please study all layers and properties of all variants to understand how it works.

Bang on, I got it now. Thanks for your help. It is my fault also that I completely missed the hover image has 0% opacity in the normal case and 100% in the hover case.

@tank666 i’m trying to get this to work but my hover interaction keeps reverting to the component’s original image. would you mind checking out my file to help me understand what i’m doing wrong?

https://www.figma.com/file/Chnz245PNY2zJx8zt2lODx/Untitled?type=design&mode=design&t=l5YVjEB1vkRPjUR4-1

Your problem is that you have added an extra fill in the hover variant. Delete this fill and add a new layer instead.

The structure of the variants will be like this:

Default
    Overlay (hidden)
    Image

Hover
    Overlay (visible)
    Image

this worked thank you so much!

@tank666 Thanks for the file reference, worked like a charm! 🤘

check this out: 

To achieve the zoom effect on hover without showing the original image, you need to ensure that the hover variant scales the image properly. Instead of just switching the image on hover, apply a scale transformation to the hover variant. This way, the image will zoom in without returning to the original. Make sure to use "smart animate" between the variants for smooth transitions.