changing only alpha unknown color - css

Question

I have few classes:
.overlay-blue {background-color: rgba(0,123,238,0.9);}
.overlay-orange { background-color:rgba(240,116,7,0.9); }
.overlay-purple { background-color:rgba(126,64,228,0.9); }
.overlay-green { background-color:rgba(57,151,95,0.9) }
.overlay-pink { background-color:rgba(173,33,106,0.9); }
.overlay-light-blue {background-color:rgba(0,183,168,0.9) }
.overlay-red {background-color:rgba(235,50,89,0.9); }
.overlay:hover
{
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fadeInFromNone;
background-color: rgba(0,0,0,0.3);
}
#-webkit-keyframes fadeInFromNone {
0% {display:block; background-color: rgba(0,0,0,0.9);}
1% {display: block ; background-color: rgba(0,0,0,0.89);}
100% {display: none ; background-color: rgba(0,0,0,0.3);}
}
`
this function of hovering is working well but it turns the overlay to black when starging the animation because of the line
0% {display:block; background-color: rgba(0,0,0,0.9);}
which makes sense.
is there a way to dim the alpha channel without duplicating the code for each color?

Answer 1

There is no easy way going about your current approach, because it is impossible to target just the alpha channel in the rgba() property separately and change it. What you can do, however, is instead of setting a background colour on your element, set the background colour of a pseudo-element stretched to the full dimension of its parent, and only declare the rgb() values. The alpha channel changes can be delegated to the opacity property instead. I call this the pseudo-element approach:
Pseudo-element approach
/* Define BG colours of pseudo element instead */
.overlay-blue::before { background-color: rgb(0,123,238);}
.overlay-orange::before { background-color:rgb(240,116,7); }
/* and more... */
/* Set relative positioning of parent element */
.overlay {
position: relative;
}
/* Stretch pseudo element, declare empty content so it will show */
.overlay::before {
content: '';
opacity: .9;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: all .5s ease-in-out;
z-index: -1;
}
/* Change opacity when parent element is hovered upon */
.overlay:hover::before {
opacity: 0.3;
}
Of course this is a rather basic implementation of your question (see demo fiddle here), because I do not know the exact details you want to achieve with your animation keyframes. The good thing is that pseudo-elements can also be animated :)
SASS approach
Even better: Alternatively, you might want to consider using a CSS preprocessor (SCSS, LESS) so that you can use variables, and do not have to repetitively redeclare the background colours. See the demo here.
You can use the following mixin:
/* Declare mixin */
#mixin overlayColor($color) {
background-color: rgba($color, 0.9);
&:hover { background-color: rgba($color, 0.3); }
}
/* Use #include for each colour class, you only have to declare the rgb(a) values */
.overlay {
margin-bottom: 10px;
padding: 20px;
position: relative;
transition: all .5s ease-in-out;
&.overlay-blue {
#include overlayColor(rgb(0,123,238));
}
&.overlay-orange {
#include overlayColor(rgb(240,116,7));
}
/* and more... */
}