Is there an effective way to add a gradient on an image...

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.

Useful resources

᲼᲼Amin

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.

᲼

12 comments

᲼᲼Amin

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

JJeremy

.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

so just with custom advanced css?

JJeremy

no, you'd apply tokens for the css

᲼᲼Amin

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

JJeremy

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?

᲼᲼Amin

yes

JJeremy

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

Attachment