How To: Inverting Foreign Objects (PNG, JPG,ETC) in XD using States

[fathern16602306]

Hi Everyone,

I am posting because I am a novice to XD and I am wondering if it is possible to add hovering/tap states to a PNG i imported from PS. Essentialy I am trying to accomplish the effect on this website: https://www.satupelkonen.com

Specifically the images inverting when you mouse over these objects. Is this currently possible within XD or is the inverting of non-native objects in XD currently not supported? Thank you for your help! 

Best,

Nico

{Renamed By MOD}

[Rishabh_Tiwari]

Hi Nico,

Thanks for reaching out. You can achieve this effect using components and states. You will need to edit the images in any image editing software like Adobe Photoshop. In XD, in the default state, you can add the original colored picture and in the hover state, you can add the edited picture. So by default it would be showing a colored picture and when hovered on it will show the edited one.

Let us know if this helps or if you need any further assistance.

Regards

Rishabh

[fathern16602306]

Thank you that is exactly what i'm trying to do but how exactly do i add the edited picture in the hover state? I don't see any optiong for that in the component navigation. currently i have 2 images in my XD file a colored version and a edited version, how do i connect the two with states?

The shirt on the left is the original image, I am trying to make it so that when I mouse over it changes to the image on the right. (Inverted image of the same shirt)The shirt on the left is the original image, I am trying to make it so that when I mouse over it changes to the image on the right. (Inverted image of the same shirt)

[susib48622382]

Hi there, I'm trying to do the same thing. Did you get a reply to your latest post with the two t-shirt images?

[João22862406ttrd]

Hi, hope I come in time to answer it. For you to have a different image in the hover state, you just need to drag and drop the image to the place you want it. It will appear a blue rectangle, showing you that you are positioning the image on a dropable place!

[fathern16602306 · Accepted solution]

Hey I found a work around incase someone finds this thread. It isn't the exact solution i was working for but i installed the XD Plug-in Anima and use the hover effects properties. I basically put a regular image over a inverted image and gave the regular image a hover effect to "fade out" which allows you to see the inverted image. hope this helps someone, XD needs alot more features they might as well buy Anima bc its better than the native component functions lol.

[HARSHIKA_VERMA]

Thanks for sharing the workaround solution which helped you fix the issue. This will definitely help our customers to fix the similar issue.  Please feel free to reach out to us in the future for any query related to XD.

We would be happy to help.

Thanks,

Harshika

[default6m927xvjga48]

How about adding these missing functions to xd itself?

[Care4ul]

Hello. I am brand new to the group, and pretty much a beginner too so I would so

appreciate any helpful tips along with ideas whiile, or if, I show my work

Thrilled  to be here and ready to go.

Karen

[Zain Kh@n]

Place an image and create Black color "Rectangle" which will cover your entire image then change "Blending mode" of rectangle to "Exclusion"

Sample file is attached

Cheers