lighten background color on hover for different background colors

Question

I have multiple elements, their background colors are different from each other. like:

<div class="element"> Content of the DIV</div>
<div class="element2"> Content of the DIV</div>

.element{
    width:100px;
    height:50px;
    background-color:#888888;
}
.element2{
    width:100px;
    height:50px;
    background-color:#222222;
}

I want to make hover like:

.element:hover, .element2:hover{}

When I bring mouse over the element, only background should be little bit lighter. I don't want to use opacity: 0.4 (lightens whole div) or background-color:rgba(50,50,50,0.5); (only for one color)

JSFIDDLE

Would you be ok with introducing an extra `span` element for the content like [here](http://jsfiddle.net/hari_shanx/9x6mtvLx/). This is the simplest that I could think of. (*Edit:* The original fiddle was the wrong version. [Here](http://jsfiddle.net/hari_shanx/9x6mtvLx/3/) is the correct one.) — Harry, Aug 17 '15 at 07:35
Also you might want to have a look at: http://stackoverflow.com/questions/6962432/is-it-possible-to-change-only-the-alpha-of-a-rgba-background-colour-on-hover — Hashem Qolami, Aug 17 '15 at 07:35

David Thomas · Answer 1 · 2015-08-17T08:25:38.087

The easiest way to achieve this is to simply apply a background-image to your elements on :hover. Either using a CSS gradient (which I generated using ColorZilla's "Ultimate CSS Gradient Generator"):

.element:hover,
.element2:hover,
.element3:hover {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.5+100 */
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.5)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff', GradientType=0);
}

.element {
  width: 100px;
  height: 50px;
  background-color: #888888;
}
.element2 {
  width: 100px;
  height: 50px;
  background-color: #222222;
}
.element3 {
  width: 100px;
  height: 50px;
  background-color: #ff9900;
}
.element:hover,
.element2:hover,
.element3:hover {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.5+100 */
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.5)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff', GradientType=0);
}

<div class="element">Content of the DIV</div>
<div class="element2">Content of the DIV</div>
<div class="element3">Content of the DIV</div>

Or using a partially-transparent image:

.element:hover,
.element2:hover,
.element3:hover {
  background-image: url(https://i.stack.imgur.com/5udh0.png);
}

.element {
  width: 100px;
  height: 50px;
  background-color: #888888;
}
.element2 {
  width: 100px;
  height: 50px;
  background-color: #222222;
}
.element3 {
  width: 100px;
  height: 50px;
  background-color: #ff9900;
}
.element:hover,
.element2:hover,
.element3:hover {
  background-image: url(https://i.stack.imgur.com/5udh0.png);
}

<div class="element">Content of the DIV</div>
<div class="element2">Content of the DIV</div>
<div class="element3">Content of the DIV</div>

This works because of the 'stacking' order of the background properties; the background-color sits at the back and the background-image sits 'above' that layer.

References:

"Using CSS Gradients," at MDN.

I like this approach a lot as it doesn't need any extra elements (real or pseudo). Nicely done :) — Harry, Aug 17 '15 at 08:24

score 2 · Answer 2 · edited Jul 18 '16 at 04:36

Here is a Fiddle and you should wrap your content into divs so you can apply rgba(255,255,255,0.5) to them:

.element{
    width:100px;
    height:50px;
    background-color:#888888;
    position:relative;
}
.element2{
    width:100px;
    height:50px;
    background-color:#222222;
    position:relative;
}
.element:hover > div, .element2:hover > div{
    /* what can we put here? */
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.5);
}

<div class="element"><div>Content of the DIV</div></div>
<div class="element2"><div>Content of the DIV</div></div>

score 1 · Answer 3 · edited May 23 '17 at 12:14

this is a trick that uses the way stacking contents are rendered, backgrounds always below contents (even if it belongs to a higher stack):

fiddle

  div {
      width:100px;
      height:50px;
      z-index:2;
      position:relative;
  }
  .element {
      background-color:#888888;
  }
  .element2 {
      background-color:red;
  }
  .element3 {
      background-color:cyan;
  }
  div:hover:after {
      content:'';
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:white;
      opacity:0.5;
      z-index:-2;
  }

<div class="element">test</div>
<div class="element2">test</div>
<div class="element3">test</div>

if you're interested in the explanation check this answer

score 0 · Answer 4 · answered Aug 17 '15 at 08:13

OR YOU CAN TRY THIS CODE ALSO
OR YOU CAN TRY THIS ONE ALSO::

<!DOCTYPE html>
<html>
<head>
<style>
.element{
width:100px;
    height:50px;
    background-color:#888888;
}
.element:hover {
    background-color: yellow;

}
.element2{
width:100px;
    height:50px;
    background-color:#222222;

}

.element2:hover {
    background-color: red;
}
</style>
</head>
<body>



<div class="element">

  Content of the DIV

</div>
<div class="element2">
Content of the Div2
</div>


</body>
</html>

lighten background color on hover for different background colors

4 Answers4