5

i want to make it so that when you hover over an element, it's always darker or lighter than it initially was. regardless of the color

something like this but universal

.darker{
Background:red;
width:100px;
height:100px
}

.darker:hover{
Background:#b20000
}
.lighter {
Background:blue;
width:100px;
height:100px
}

.lighter:hover{
Background:#adccff
}
<div class='darker'></div>
<div class='lighter'></div>
valeria
  • 121
  • 1
  • 1
  • 9

6 Answers6

16

You're looking for the brightness CSS filter:

The brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker

div {
  width: 50px;
  height: 50px;
  background: red;
  filter: brightness(1);
}

.light-on-hover:hover {
  filter: brightness(5.00);
}

.dark-on-hover:hover {
  filter: brightness(0.5);
}
<h5> Darker on hover </h5>
<div class="dark-on-hover"></div>

<h5> Lighter on hover </h5>
<div class="light-on-hover"></div>
nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
  • when i use it on a button, it gets lighter at first but then gets back to normal right away.. and also the text gets too bright – valeria Dec 08 '18 at 13:04
  • That's because your button text is a vastly different color than the background; Therefore it gets far brighter than it should. Play with your colors and use lower +brightness values. – nicholaswmin Dec 08 '18 at 13:09
  • but i just copied and assigned the code above to a button element – valeria Dec 08 '18 at 13:11
  • Let me explain this again. The filter is applied on *all colors* on the element. If the text color is vastly lighter than the background color, then the text will appear "burned" for the brightness level needed to make the background look slightly bright. You might be able to get away with using `filter: contrast` as well but I'm not sure. Your original post never mentioned a button. – nicholaswmin Dec 08 '18 at 13:11
  • 2
    Not for your use case; Wait for other answers. Or perhaps ask another question: "How to ensure `filter: brightness` doesn't make text appear burned" or something. It's an interesting question. – nicholaswmin Dec 08 '18 at 13:17
  • Did you try brightness values other than 2.0 if that burned the text? Maybe 1.3? This is likely the most suitable technique for what you need, I would give it a good chance. – James Dec 09 '18 at 13:50
  • @James I think Valeria is right; Brightness is gonna make text look burned even with slightly +brightness values. I'm curious whether a *negative* brightness filter can be applied on the text only; So it counteracts the "parents" brightness and looks slightly better. – nicholaswmin Dec 09 '18 at 19:53
5

There is one way to do it by adding a pseudo element as an overlay

See code snippet

div {
  position: relative;
  display: inline-block;
  color: white;
  font-size: 18px;
  padding: 50px;
}

div > * {
  position: relative;
  z-index: 2;
}

div.red {
  background: red;
}

div.green {
  background: green;
}

div.blue {
  background: blue;
}

div:after {
  content: '';
  display: inline-block;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 1;
}

div:hover::after {
  opacity: .3;
}
<div class="red"><span>text</span></div>
<div class="green"><a href="#">link</a></div>
<div class="blue"><button>button</button></div>
Chiller
  • 9,520
  • 2
  • 28
  • 38
1

You can consider multiple background and some CSS variable like below. The idea is to either add some white or black color on the top by adjusting background-size

.color {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
    linear-gradient(var(--c, red), var(--c, red));
  background-size: 0 0, 0 0, auto;
  width: 100px;
  height: 100px;
  display:inline-block;
}

.darker:hover {
  background-size:auto,0 0,auto;
}

.lighter:hover {
  background-size:0 0,auto,auto;
}

.blue {
 --c:blue;
}
.green {
 --c:green;
}

.yellow {
 --c:yellow;
}


.pink{
 --c:pink;
}
<div class='color darker blue'></div>
<div class='color lighter blue'></div>
<div class='color lighter red'></div>
<div class='color darker red'></div>
<div class='color darker green'></div>
<div class='color lighter yellow'></div>
<div class='color darker pink'></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

Hmmm, I can imagine two options

1) use an element inside the button and set a background for that element with some opacity like this https://codepen.io/anon/pen/WLNbPG (it's a bit hacky though)

<button id='button1'><span>Darker</span></button>

<button id='button2'><span>Lighter</span></button>

and the CSS

button {
  border: 0;
  background-color: red;
  padding: 0;
}
button span {
  display: block;
  padding: 1em
}

#button1:hover span {
  background-color: rgba(0,0,0,.4);
}

#button2:hover span {
  background-color: rgba(255,255,255,.4);
}

That way the span background with it's opacity can make the effect of makign the background of the button darker or lighter.

2) use an image as the button background and, on hover, add a color with alpha values and use background-blend-mode: darken/lighten https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode but it doesn't have good support for Edge or Android's webviews.

arieljuod
  • 15,460
  • 2
  • 25
  • 36
  • awhe the first is good! but the span element doesn't cover the whole button. how can i make it inherit the width and height of the button element? so that it is flexible for any width/height i set fot the button? – valeria Dec 09 '18 at 01:02
  • at least on my codepen code I see the span covers the whole button both in FF and Chrome, you can't see that on my codepen or in your code? – arieljuod Dec 09 '18 at 02:18
  • if you change the button size – valeria Dec 09 '18 at 02:32
  • but how are you changing the button size? show what you got now – arieljuod Dec 09 '18 at 02:47
0

I don't think you're explaining what you want to do clearly. My solution below answers the question you posed in this sentence:

"I wanna assign some background to the button element...and I want to make it so that when you add class names get-darker or get-lighter and hover over the button, it changes its color to the darker/lighter one."

<!DOCTYPE html>
<html lang="en-us">

<head>
    <style>
        button {
            background-color: red;
            padding: 20px;
            margin: 20px;
        }

        button:hover.get-darker {
            background-color: darkslategray;
        }

        button:hover.get-lighter {
            background-color: gray;
        }
    </style>

</head>

<body>
    <button class="get-darker">
        this button will get darker
    </button>
    <button class="get-lighter">
        this button will get lighter
    </button>
</body>

</html>
Desmond Mullen
  • 159
  • 1
  • 8
  • yes. but it should be just be just a couple of shades darker/lighter than it was, regardless of the initial color, not completely grey like here. – valeria Dec 09 '18 at 13:58
  • Then instead of `background-color`, you could set `opacity: 0.5` for example. – Desmond Mullen Dec 09 '18 at 15:53
-1

You can use opacity to make it like:-

div{
Background:rgba(255, 0, 0, 0.8);
width:200px;
height:200px
}

div:hover{
Background:rgba(255, 0, 0, 1)
}
<div></div>
Rohit Verma
  • 3,657
  • 7
  • 37
  • 75