Changing Only Background Opacity Using "Opacity", not "RGBA" - css

Question

I have two boxes that when you hover over, the background opacity should change, but the foreground text opacity should not change. I know the solution to this is on hover, set the rgba to the background color and add the opacity. Example:
#join:hover {
rgba(0, 102, 255, .4)
}
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option. I'd like to use just opacity: .4 so that the opacity is the same regardless of the background color of each box.
When I use opacity on hover, the opacity of the text in each box changes as well. To get around this, I tried using z-index/position: relative and setting the text (#join-text, #learn-text) to a higher z-index and the background (#join, #learn) to a lesser z-index. This did not render the correct results.
I also tried using pseudo class ::before like #join:hover::before but that also did not render the correct results, the position:absolute changed the position of the buttons.
Is there any way to change the opacity on hover ONLY for the background, using the opacity: .4 property? Any input would be greatly appreciated.
Find code here: https://jsfiddle.net/Lsqjwu15/1/

Answer 1

You can use CSS3 :before selector
#join:before {
background: #0066ff;
}
#learn:before {
background: #ffb31a;
}
.rectangle:before {
content: "";
width: inherit;
height: inherit;
position: absolute;
}
.rectangle:hover:before {
opacity: .4;
}
JSFiddle

Answer 2

You could make a workaround with pseudo elements (changed the "join" box):
.rectangle {
position:relative;
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join:before {
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background: #0066ff;
}
#learn {
background: #ffb31a;
}
#join:hover:before,
#learn:hover {
opacity: .4;
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>

Answer 3

Could you make the text "rgba(0,0,0,1) !important" to override the background opacity? would that still fade with the background?

Answer 4

However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option.
You haven't specified HOW the background colors are changed or what they are initially but using RGBA Colors throughout seems simple enough. JQ is perfectly capable of handing RGBA.
.rectangle {
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join {
background: rgba(0, 102, 255, 1)
}
#learn {
background: rgba(255, 179, 26, 1)
}
#join:hover {
background: rgba(0, 102, 255, .4)
}
#learn:hover {
background: rgba(255, 179, 26, .4)
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
If there is something else you haven't told us then if you want a solution to your code, you're going to have to reproduce the exact issue including the JS/JQ