• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

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

Community Beginner ,
Nov 08, 2022 Nov 08, 2022

Copy link to clipboard

Copied

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.

 

Views

360

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Community Beginner , Nov 10, 2022 Nov 10, 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 stat

...

Likes

Translate

Translate
Community Expert , Nov 11, 2022 Nov 11, 2022

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

...

Likes

Translate

Translate
Community Expert ,
Nov 09, 2022 Nov 09, 2022

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 10, 2022 Nov 10, 2022

Copy link to clipboard

Copied

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?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 10, 2022 Nov 10, 2022

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 11, 2022 Nov 11, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 14, 2022 Nov 14, 2022

Copy link to clipboard

Copied

I finally got it!

 

After making the copy for the static background, I didn’t realize you were un-grouping them as components, and then re-grouping them, just as images.

 

I think I didn’t see this because the logo was covering up the onscreen keyboard inputs.

 

Thank you for your help! I have a much better understanding of the program now.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 15, 2022 Nov 15, 2022

Copy link to clipboard

Copied

LATEST

Ah I see, when I rewatched I agreed with you, I did that part fast and haven't made clear enough maybe, but like you said that must be because I thought it was clear since I'm sharing the key strokes (and in my screen the logo is not covering the key stroke, I added the screen shot but that might be the issue for some screens) Glad you resolved the issue! 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines