Hello!
I’m working on a portfolio website. I’m working on the “projects” page and I’m trying to put different pictures so it looks realistic. The issue I have is that I can change the picture on the different instances of the component but when I do hover only appears the image I used when creating the component not the one on the instance.
This is the component:
This is the image i want to use:
I used a component with rectangle as mask:
The 2nd variant has both frame and rectangle corner radius set to 50
Now the instance on frame has 1st original and 2nd the image swapped.
And this is what is happening. Both are working as intended.
Complete picture:
This usually happens when you use two different images for the default and for the hover states in your component.
Make sure the name and the actual image is the same and you don’t change any additional settings.
Try checking the name, if it’s different, make it the same.
Additionaly, copy the properties from the default state over to the hover state using this
Test it. If you need to add the rounded corners, you can put the image in a parent frame (both states) and do the cropping there.
Super!!! Thank you very much! Solved it using the masks instead of the rectangles as I was doing it!
Thanks a lot to both of you!! 
