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%);
}

Answer 3

you should use the RGBa method (background-color:rgba(R,G,B,alpha);) to do this:

.element{
    background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
} 
.element:hover{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

FIDDLE

AND if you strongly need to make it work in IE8 or lower too here is how it comes:

.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;
}

note that the startColorstr and endColorstr values are built like this #AARRGGBB (where AA is the Alpha channel) and must be the same if you don't want a gradient effect from a color to another.

Answer 4

You can do this with only CSS using filter: brightness(); but it is only currently supported in WebKit browsers. See http://jsfiddle.net/jSyK7/

Answer 5

I would use a :after pseudo-element instead of a conventional background. It's supported in IE8, where rgba() isn't.

HTML:

<div class="hoverme">
    <p>Lorem ipsem gimme a dollar!</p>
</div>

CSS:

.hoverme {
    position: relative;
}
.hoverme:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: -1;
}

.hoverme:hover:after {
    background-color: #ddd;
}

or something like that.

http://caniuse.com/#search=%3Aafter

For a smoother result, add a CSS3 transition:

.hoverme:after {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

The previous snippet was copied and pasted from http://css3please.com

http://jsfiddle.net/ghodmode/6sE9E/

Answer 6

You want to change the background-color lightness of any element that is hovered without using opacity. Unfortunately. I don't think this is possible without setting specific background-color values for your hovers.

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.

There is one alternative that I can think of but it would require a translucent PNG overlay on the entire element, which will also cover any of the element's contents. Thereby not solving your problem.

Related Question: Dynamically change color to lighter or darker by percentage CSS (Javascript)

Answer 7

I'm using box-shadow property to control the brightness of the background color, by placing a translucent overlay

Example:

.btn {

  background-color: #0077dd;
  
  display: inline-flex;
  align-content: center;
  padding: 1em 2em;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  margin: 0.5em;
  cursor: pointer;
}

.btn.brighten:hover {
  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}

.btn.darken:hover {
  box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.3);
}

<span class="btn brighten">Brighten on Hover</span>
<span class="btn darken">Darken on Hover</span>