CSS: lighten an element on hover
css, hsl, opacity, rgba
Solution
Here's an easy way to do it:
.myElement:hover {
filter: brightness(150%);
}
Problem
Assuming an element is at 100% saturation, opacity, etc... how can I have its background become slightly lighter when it is hovered? The use case is that I'm allowing a user to hover over any element on a page. I don't want to go around determining each colors equivalent at 80% opacity. One method is to change the `opacity: 0.4` but I only want the background to change.