Participant

StickyAnswered

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

Forum|Forum|5 years ago
August 27, 2020
4 replies
8201 views

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}

How to

This topic has been closed for replies.

Correct answer fathern16602306

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.

Zain Kh@n

Participant

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

Care4ul

Participant

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

Karen

fathern16602306AuthorCorrect answer

Participant

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

Community Manager

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

D

default6m927xvjga48

Participant

How about adding these missing functions to xd itself?

Rishabh_Tiwari

Community Manager

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

fathern16602306Author

Participant

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)