title: Changing Only Background Opacity Using "Opacity", not "RGBA"
body: <p>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:</p>
  
  <pre><code>#join:hover {
      rgba(0, 102, 255, .4)
  } 
  </code></pre>
  
  <p>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 <strong>opacity: .4</strong> so that the opacity is the same regardless of the background color of each box. </p>
  
  <p>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 (<code>#join-text, #learn-text</code>) to a higher z-index and the background (<code>#join, #learn</code>) to a lesser z-index. This did not render the correct results. </p>
  
  <p>I also tried using pseudo class <code>::before</code> like <code>#join:hover::before</code> but that also did not render the correct results, the <code>position:absolute</code> changed the position of the buttons. </p>
  
  <p>Is there any way to change the opacity on hover ONLY for the background, using the <code>opacity: .4</code> property? Any input would be greatly appreciated. </p>
  
  <p>Find code here: <a href="https://jsfiddle.net/Lsqjwu15/1/" rel="nofollow">https://jsfiddle.net/Lsqjwu15/1/</a></p>