Skip to main content
D
desbullard
Participant
November 2, 2022
Answered

Is it possible to create a hover state with both the image and text in XD?

  • November 2, 2022
  • 1 reply
  • 1146 views

Hi!

 

I have just learned how to use the hover feature in Adobe XD and I am wondering how I can do the same with the photo and detailed info in the example below. I have figured out how to use hover with just the image but I would like to add the text and additional elements to the hover.

 

Is it possible to create a hover state with both the image and the text so that whenever a user hovers over either part, it will transition to the hover state? Hope this makes sense!

 

Default state:

Hover state:

 

<Title renamed by moderator>

    This topic has been closed for replies.
    Correct answer HARSHIKA_VERMA

    Glad to hear you're able to figure it out. However, we would love to understand how you achieved your workflow. I also got some responses from the team.

     

    You need to add the text elements to the component. All the layers have to be in the same component. What you can't do is trigger a hover interaction from a separate component.

     

    Hope it helps.

     

    Thanks,

    Harshika

    1 reply

    HARSHIKA_VERMA
    Community Manager
    HARSHIKA_VERMACommunity Manager
    Community Manager
    November 3, 2022

    Hi @desbullard,

     

    Thank you for reaching out. I am checking with the team to see whether this workflow is possible in XD. I will respond as soon as I hear anything from the team.

     

    Meanwhile, I am keeping the discussion open for our community experts who might have any suggestions for you.

     

    Thanks,

    Harshika

      D
      desbullardAuthor
      Participant
      November 3, 2022

      Thank you! I actually figured it out with some additional trial and error.

      I am not sure how to explain it, but if anyone reading this wants to know how I did it please reach out and I will do my best to explain the process. 

        HARSHIKA_VERMA
        Community Manager
        HARSHIKA_VERMACommunity ManagerCorrect answer
        Community Manager
        November 3, 2022

        Glad to hear you're able to figure it out. However, we would love to understand how you achieved your workflow. I also got some responses from the team.

         

        You need to add the text elements to the component. All the layers have to be in the same component. What you can't do is trigger a hover interaction from a separate component.

         

        Hope it helps.

         

        Thanks,

        Harshika

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices