Is there an effective way to add a gradient on an image component?
Is there an effective way to add a gradient on an image component?
At a glance
The community member wants to create an image component that changes the image based on mouse focus, with a gradient overlay. They cannot use the image in a div and use backgrounds because their function would not work, as they cannot give the image in the backgrounds an id.
The community members discuss ways to add a gradient overlay to the image component. One community member suggests a CSS structure with a relative container, the image at z-index 0, and an absolute overlay at z-index 1 with a linear gradient. Another community member mentions using CSS tokens. The discussion also covers the use of the inset property and how to inspect the structure using developer tools.
There is no explicitly marked answer in the comments.
I want to have an image component which changes the image based on what the mouse focused on, but I want that there is a gradient over it. I can't use the image in a div and use backgrounds because than my function wouldn't work because I can't give the image in the backgrounds an id.
https://css-test-components.wstd.io I built this test for someone else in discord. It has the same attributes you're looking for. Do you know how to use dev tools to figure out how it's built?