simple solution :
a
{
position: relative;
display:inline-block;
background: rgba(red, 0.75);
padding: 20px;
&:before
{
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
&:hover
{
&:before
{
background-color: rgba(#000, 0.25);
}
}
}
exemple : https://jsfiddle.net/epwyL296/14/
just play with alpha of background. if you want light instead of darkness, just replace #000 by #fff