CSS: lighten an element on hover

Question

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.

Answer 1

It's a long time ago but you can do something like this:

.element {     background-color: red; } .element:hover {     box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); } 

You can change the 100px into a number you want. I took a large one to cover the whole element.

It isn't a very beautiful solution but it works!

Here an example: http://jsfiddle.net/6nkh3u7k/5/

Answer 2

Here's an easy way to do it:

.myElement:hover {   filter: brightness(150%); }