Skip to main content
D
DoubleHawk
Participant
November 8, 2022
Answered

[question] Netflix(web)-like thumbnail popup-on-hover, How to prevent overlapping thumbnails?

  • November 8, 2022
  • 1 reply
  • 1233 views

I'm designing a character select screen for a video game and I've prototyped it so that each character portrait grows to a bigger size when hovered over, just like the thumbnails on Netflix (web, not mobile).

 

However, due to the layer system, the expanded/hovered thumbnails sometimes overlap or underlap other thumbnails.

 

Is there any way around this? Or rather, is there any way to successfully replicate Netfllix's web-based thumbnail design in Adobe XD's current state?

 

Thanks for reading.

 

    This topic has been closed for replies.
    Correct answer AkinGn

    I feel like I tried everything to replicate your method, with no luck.

     


    I think what you're missing is making the main component's opacity 0 at default state and making its opactiy 100% on its hover state (in order to do that, after making main component's opacity 0 in its default state, you need to pick its hover state, and then while hover is selected, double click to the component/image to get intto the "inner" state of its hover, as I see it, you select its default and again adjust the opacity, which doesn't work for hover only) and having other components as a static background image (so our thumbnails are going to look like they're growing only on hover, but actually our components are invisible, and there's only a bg image instead of them, we're showing them only on hover, and for that, our components need to be in front of the background image in the layer stack. ) Have you downloaded the sample file I provided at the description section of the video? Maybe comparing it to your file might help. If you still need help you can send me the sample file I can take a look also.

    1 reply

    AkinGn
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    November 9, 2022

    Hi @DoubleHawk, previously I made a video about two "non-perfect" workarounds about this, since it's not possible to change objects' z-indexes on hover: https://www.youtube.com/watch?v=VmHoCJ3eqhU Hope this helps!

      D
      DoubleHawkAuthor
      Participant
      November 11, 2022

      Hi @AkinGn , thank you for spending the time to help assist me with this issue.

       

      I've spent a lot of time over the last day, trying to replicate what you achieve at the end of your linked video, but I'm sorry to say I haven't been able to successfully replciate the result.

       

      I believe I 'm getting confused somehwhere around the 10 minute mark. Usually, the issue boils down to the fact that changing the opacity in one state seems to equally and simultaneiously ewffect the opacity in a secondary state (hovered).

       

      Any suggestions on what I might be doing wrong?

       

      D
      DoubleHawkAuthor
      Participant
      November 11, 2022

      I feel like I tried everything to replicate your method, with no luck.

       

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