Update master-detail UI to highlight text on background

[vdias38]

Examples of item-detail w/ background img

• https://www.disneyplus.com/en-gb/movies/jane/7OcmicV8vTM5
• https://www.sbs.com.au/ondemand/movie/a-monster-in-paris/551638595926

It uses a layer with black opacity on bottom, and increase opacity on scroll to streamlines the read of text.

On following example the opacity appears on top and bottom as background for text, but description use a white bg: https://www.nationalgeographic.com/expeditions/trip-search/step-back-in-time/

The Disney example seems effective. Strategical positions with a gradient for quick information and opacity increase over scroll for a more descriptive and long text.

For more examples, I'll leave this blog article. It helps to understand the strong points of each technique and in different situations, where we choose the elements to prioritize and sacrifice: https://blog.iamsuleiman.com/techniques-to-display-text-overlay-background-images/

[vdias38]

https://firebase.blog/posts/2022/05/whats-new-at-google-io

[vdias38]

focus on mobile-first, using yahoo UI as model for master