How to Change Only the Alpha of a Rgba Background Colour on Hover

Is it possible to change only the alpha of a rgba background colour on hover?

This is now possible with custom properties:

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }

a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

To understand how this works, see How do I apply opacity to a CSS color variable?

If custom properties are not an option, see the original answer below.

Unfortunately, no, you'll have to specify the red, green and blue values again for each individual class:

a { display: block; position: relative; }

.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }

.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

You can only use the inherit keyword alone as a value for the property, and even then the use of inherit isn't appropriate here.

CSS inherit previous background rgba value EXCEPT alpha (opacity)

There is a way to achieve this in JavaScript:

1. First, target your element:

   var elem = document.querySelector('#maincontent');

2. Then, you can capture the current background-color:

   var oldColor = getComputedStyle(elem ).backgroundColor;

3. Then, update the color:

   var newColor = 'rgba' + oldColor.slice(3, -1) + ', 0.5)';

   // The above line will convert the color from rgb to rgba

   // rgb(16, 14, 23) => rgba(16, 14, 23, 0.5)

4. Now, you can update the bg-color of the target element:

   elem.style.backgroundColor = newColor;

Changing background color opacity on mouseover

No html/css doesn't have that option built in, but since you're accessing/setting the colour in javascript you might as well add in your own function which can handle that for you.

Here's an example for you:

<script type="text/javascript">
function RGBA(red,green,blue,alpha) {
    this.red = red;
    this.green = green;
    this.blue = blue;
    this.alpha = alpha;
    this.getCSS = function() {
        return "rgba("+this.red+","+this.green+","+this.blue+","+this.alpha+")";
    }
}

// store a copy of the color
var bgColor = new RGBA(255,0,0,0.5);

function setBgOpacity(elem, opac) {
    bgColor.alpha = opac;
    elem.style.backgroundColor = bgColor.getCSS();
}
</script>

Then in the HTML use the onmouseover event to change the opacity of the bgColor:

<div onmouseover="setBgOpacity(this, '0.3');"
     onmousout="setBgOpacity(this, '0.5');">Put your mouse over me</div>

changing only alpha unknown color

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... */
}

Change Colour Opacity When Dont know RGB values only Alpha

Problem

Using the opacity property on the button itself would affect the text of the button; not ideal.

Solution

Apply the background color to a pseudo-element instead and layer it underneath the text with negative z-index. When needed, use the opacity property on the pseudo-element to create your transparent background.

Example

Note: Pseudo-elements cannot be applied to the <input> element as it cannot have children. This will only work with elements that can have children, such as <button> and <a>.

button {  position: relative;  background: none;  border: solid 1px #EEE;  padding: 10px;  border-radius: 5px;  overflow: hidden;}button:before {  content: '';  position: absolute;  top: -1px;  right: -1px;  bottom: -1px;  left: -1px;  background: red;  z-index: -1;  opacity: .5;}button:hover:before {  opacity: .8;}button:active:before {  background: orange;}

<button>Button</button>

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

div {  display: inline-block;}.a.unconfirmed {  height: 100px;  width: 100px;  background: rgba(255, 0, 0, 0.5);}.a.confirmed {  height: 100px;  width: 100px;  background: rgba(255, 0, 0, 1);}.b.unconfirmed {  height: 100px;  width: 100px;  background: rgba(0, 0, 255, 0.5);}.b.confirmed {  height: 100px;  width: 100px;  background: rgba(0, 0, 255, 1);}

<div class="a confirmed">Confirmed</div><div class="a unconfirmed">Unconfimed</div>
<div class="b confirmed">Confirmed</div><div class="b unconfirmed">Unconfimed</div>

#include <iostream>

using namespace std;
typedef unsigned RGBA32;

int colorFloatToRGBAByte(float f)
{
    return std::max(0, std::min(static_cast<int>(lroundf(255.0f * f)), 255));
}

RGBA32 makeRGBA32FromFloats(float r, float g, float b, float a)
{
    cout << "Alpha: " << a;
    return colorFloatToRGBAByte(a) << 24 | colorFloatToRGBAByte(r) << 16 | colorFloatToRGBAByte(g) << 8 | colorFloatToRGBAByte(b);
}

int main()
{
        RGBA32 t;
        t = makeRGBA32FromFloats (255.0f, 255.0f, 255.0f, 0.25f);
        cout << static_cast<unsigned>(t) << std::endl;
    return 0;
}

background: rgba(0,0,0,.5);