CSS - Darken on hover with unknown color [duplicate]

Question

I'm randomly generating colors into boxes of 50x50px and when I hover them I want them to become darker, but remain the same color.

I've tried setting li:hover to a dark color with transparency

background-color: rgba(91, 91, 91, 0.51) !important;

but it doesn't look good, it's making the whole <li> (which is the box I'm referring to) transparent on hover.

How do I achieve this?

Here is a Plunker.

Answer 1

Sorry, it's not possible to only change the alpha. You have to specify the red, green and blue values for each individual class.

But there's another way which is answered here and I'll copy below: https://stackoverflow.com/a/16910152/1026017

Here's a demo: http://codepen.io/chrisboon27/pen/ACdka

Option 1: ::before psuedo-element:

.before_method{   position:relative; } .before_method:before{   display:block;   content:" ";   position:absolute;   z-index:-1;   background:rgb(18, 176, 41);   top:0;   left:0;   right:0;   bottom:0;   opacity:0.5; } .before_method:hover:before{   opacity:1; } 

Option 2: white gif overlay:

.image_method{   background-color: rgb(118, 76, 41);   background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png) } .image_method:hover{   background-image:none; } 

Option 3: Box-shadow method (variation on the gif method - may have performance issue):

.shadow_method{   background-color: rgb(18, 176, 41);   box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2); } .shadow_method:hover{   box-shadow:none; }