Join the Webstudio community

Updated 2 months ago

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.

Useful resources
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.
J
12 comments
Is there an effective way to add a gradient on an image component?
.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.
so just with custom advanced css?
no, you'd apply tokens for the css
where do you find "inset" and for what use it?
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?
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
CleanShot_2024-12-12_at_12.44.202x.png
got it
Attachment
image.png
I use that pattern all the time
Thank you ver much
Add a reply
Sign up and join the conversation on Discord