Is there an effective way to add a gradient on an image component?

Question

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.

᲼Amin · Answer

Jeremy · Answer

.img-container>img+.img-overlay.img-container { position: relative; }img { z-index: 0; }.img-overlay { position: absolute; inset: 0; z-index: 1; backgound-image: linear-gradient; }This is how you could setup the structure & styles.

᲼Amin · Answer

so just with custom advanced css?

Jeremy · Answer

no, you'd apply tokens for the css

᲼Amin · Answer

where do you find "inset" and for what use it?

Jeremy · Answer

https://css-test-components.wstd.ioI 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?

᲼Amin · Answer

yes

Jeremy · Answer

header has a z-index of 2overlay has z-index of 1background image I didn't set the z-index or position

᲼Amin · Answer

yess

᲼Amin · Answer

got it

Jeremy · Answer

I use that pattern all the time

᲼Amin · Answer

Thank you ver much

Join the Webstudio community

Is there an effective way to add a gradient on an image component?