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

[DoubleHawk]

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.

[AkinGn]

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!

[DoubleHawk · Accepted solution]

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?

[DoubleHawk]

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

[AkinGn · Accepted solution]

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.

[DoubleHawk]

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.

[AkinGn]

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!