Incorporating a GridList displaying a variety of images fetched from an external source, I have successfully created an ever-changing image gallery. Now, my goal is to convert this dynamic image gallery into grayscale or transparency and utilize it as a backdrop for overlaying content like text boxes and additional images on top.
Currently, here's the code snippet I have:
<GridList cols={3}>
{
this.state.images.map(image => (
<GridListTile
rows={1}
ref={this.imageRef}
key={image.id}
style={{ padding: 0 }}
>
<img src={image.urls.regular} alt={image.alt_description} />
</GridListTile>
))
}
</GridList>
Presently, my UI appears as shown in this screenshot: https://i.stack.imgur.com/yhSUS.jpg
An issue arises with the positioning of the Hello World text, which is displayed at the bottom left corner of the image. I aim to centralize this text and transform the GridList of images into a background that can either be transparent or rendered in grayscale.
The ultimate objective is to enable the addition of other Material UI components on top of the GridList of images, using the images as a background to support overlaying content.
Despite multiple attempts to incorporate z-index in the components, I have yet to achieve the desired result.