Join the Webstudio community

Updated 4 months ago

background filter saturate

At a glance

The community members are discussing how to make a background image greyscale until another box scrolls over it, at which point the image becomes saturated using the CSS filter: saturate() property. One community member suggests that the solution is not specific to Webstudio, and that the approach should be figured out using HTML and CSS. Another community member mentions a related video by Kevin Powell on YouTube that the original poster should check out. The original poster acknowledges that desaturating the image seems more straightforward than adding saturation, and plans to look up the Kevin Powell video for guidance.

How would you make it so that a background image is greyscale until another box scrolls over it and saturates it, using the background filter saturate?
J
J
c
3 comments
Hey whatever the solution is, it's not webstudio specific. Ie, Webstudio is a UI for html and css, so figure out how to do it in html/css and you'll know how to to do it in Webstudio
There is a Kevin Powell video on youtube where he does what you're looking for but with a logo. You'll have to look it up. This might be what you mean.
Thanks guys. I thought that the way you can make the background filter desaturate an underlying image looked so cool, I hoped I could reverse it. But taking colors away definitely seems more possible than adding colors in so yeah it makes sense.

Thanks Jeremy, I'll look it up and see what he does!
Add a reply
Sign up and join the conversation on Discord