Streaming live at 10am (PST)

Can you apply a css darken/lighten effect?


#1

Is there a way to apply a css/sass darken/lighten effect on hover?

like:
darken(color, 10%)
lighten(color, 10%)


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Sure. Add an overlay on hover that can be any color and opacity that you’d like.

Make sure to add a transition to the background color for a smoother effect.
50

Other than the Hover state, you can use the Hover interaction to add/remove a tint which is just color filled <div> with opacity. Lots of possiblities.

Hope that helps. Happy designing!


#3

Ah yea, I’m aware of this (regular) method, but I was wondering if there was a truer sass method where webflow takes the background-color and darkens it by the desired value, instead of having to create a separate layer/div. Thanks, though!