Skip to main content
R
roborob67
New Participant
November 18, 2019
Answered

Hover Opacity

  • November 18, 2019
  • 3 replies
  • 11937 views

I'm trying to set up in Xd a thing where I have one image to change to another on hover; the best way I can think of is to have one image on top of another, and have the hover state change the opacity of the top image from 0% to 100%. How do I set this up?

 

Or is there a better way to do this effect?

This topic has been closed for replies.
Correct answer Preran

Hmm. Still can't get it to work. I double click the picture asset, do COMPONENT +, see the Default State, +, make a Hover State. With the Hover State selected, I adjust the APPEARANCE Opacity to 100%. Then with the Default State selected, I set the APPEARANCE Opacity to 0%. When I select the hover State again, the APPEARANCE Opacity is at 0%. I set it to 100%, select the Default State again, and the APPEARANCE Opacity is at 100%. And so on. 

 

Either I'm not doing this right, or something is broken or missing. I've created new documents to test this independantly and it's repeatable every single time. I've noticed that every time I double click the asset, the COMPONENT settings reset.


This is what you need to do. Open the layers panel, click the diamond, select the image and change its opacity. Repeat for the Hover state. Let me know if it worked. 

3 replies

B
blakehughes
New Participant
August 9, 2020

An easier way to achieve this is to click on the fill color box and change the opacity there. Then add your hover state and change the opacity the same way. There is no reason to click the diamond in the layer window.

    HARSHIKA_VERMA
    Community Manager
    HARSHIKA_VERMACommunity Manager
    Community Manager
    August 14, 2020

    Great observation and solutions. This will definitely help our customer fix their 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

    P
    ParkerDD
    New Participant
    May 24, 2020

    Sorry to dig up an old forum;


    Neither what I think is the intended way for this to work, nor the workaround are working for me.

    When I try to change the opacity for any state of a component, all the states follow suit. This happens regardless if I select the object in the layers tab or not

    HARSHIKA_VERMA
    Community Manager
    HARSHIKA_VERMACommunity Manager
    Community Manager
    May 27, 2020

    Hi Parker,

     

    Sorry to hear you are having trouble changing the opacity of the state. Could you please make sure you are not setting the entire component to 0, and not the contents of the state? Double click on the state and then make sure the object is selected and then change the opacity.

     

    Let me know if that helps.

     

    Thanks,

    Harshika

    Vishu_Aggarwal
    Vishu_Aggarwal
    Participating Frequently
    November 19, 2019

    This is what you're trying to achieve - https://xd.adobe.com/view/58a7b25b-386f-47b0-69c0-b972d81e77c3-2e96/

     

    If yes, I have created an invisible square without fill & border in the XD logo component above the PS logo. Refer the screenshot - 

     

     

    Vishu AggarwalAdobe Certified Instructor, Professional and Expert
    R
    roborob67Author
    New Participant
    November 19, 2019

    Not really. What I have is an image converted to line art, and over top of that another image of that art as a photo. I'm trying to hover over the top image and have the opacity change from 0% to 100%. So far when I change the opacity, it changes for both, not just the hover state.

    Vishu_Aggarwal
    Vishu_Aggarwal
    Participating Frequently
    November 20, 2019

    Do you mean that when you change the opacity of hover state it actually changes the opacity of default state as well? if yes, then when you select the component double-click on it to see the object properties and then change the opacity then it will only change the opacity of hover state. 

    Vishu AggarwalAdobe Certified Instructor, Professional and Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices