Skip to main content

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:



But this is what appears when hovering:



Thanks in advance!!

I used a component with rectangle as mask:

image


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.

image


And this is what is happening. Both are working as intended.

image

image


Complete picture:

image

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

image


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!! 😁

Reply


Terms & ConditionsCookie settings