133

I have a set of <a> tags with differing rgba background colours but the same alpha. Is it possible to write a single css style that will change only the opacity of the rgba attribute?

A quick example of the code:

 <a href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a href="#"><img src="" /><div class="green">Link 2</div></a>

And the styles

a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

What I would like to do is write a single style that would change the opacity when the <a> is hovered over, yet keep the colour unchanged.

Something like

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
Fireflight
  • 2,921
  • 5
  • 24
  • 22
  • By the way, what are your `div` elements doing in your `a` elements? – BoltClock Aug 05 '11 at 21:04
  • 2
    @BoltClock [HTML5 allows block-level `a` elements.](http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element) – mercator Aug 05 '11 at 21:09
  • @mercator: Alright. I missed that. – BoltClock Aug 05 '11 at 21:10
  • @BoltClock It seemed the simplest way to code for the effect, a single `a` tag as opposed to one around the `img` and another around the text. The fact that it's supported by HTML 5 is a nice bonus. – Fireflight Aug 12 '11 at 21:36
  • 1
    When this question was asked - this wasn't possible with CSS. Now this **is possible** - with [CSS Variables](https://www.w3.org/TR/css-variables-1/) - as I've shown in [my own answer](https://stackoverflow.com/a/45463603/703717) – Danield Aug 02 '17 at 21:19
  • Here's a link for those wondering how to [convert RGB to RGBA](https://stackoverflow.com/q/6672374). – djvg Sep 03 '21 at 08:50

15 Answers15

80

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.

totymedli
  • 29,531
  • 22
  • 131
  • 165
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Eagerly waiting for color modification functions (https://www.w3.org/TR/css-color-5/) so we don't have to define the color channels as a list. – ahong Dec 07 '21 at 08:06
18

You could do various things to avoid having to hard code the numbers if you want to. Some of these methods only work if you use a plain white background as they're really adding white on top rather than reducing opacity. The first one should work fine for everything provided:

  • you aren't already using the psuedo-element for something; and
  • you can set position to relative or absolute on the <div> tag

Option 1: ::before psuedo-element:

.before_method{
  position:relative;
}
.before_method:before{
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18, 176, 41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
}
.before_method:hover:before{
  opacity:1;
}

Option 2: white gif overlay:

.image_method{
  background-color: rgb(118, 76, 41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
  background-image:none;
}

Option 3: box-shadow method:

A variation of the gif method, but may have performance issues.

.shadow_method{
  background-color: rgb(18, 176, 41);
  box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
  box-shadow:none;
}

CodePen examples: http://codepen.io/chrisboon27/pen/ACdka

Kirk Beard
  • 9,569
  • 12
  • 43
  • 47
Chris Boon
  • 1,257
  • 10
  • 10
  • Good answer, thanks. I found the third option useful and simpler if I reverse this method: don't use anything additional without hover, and on hover use: box-shadow: inset 0 0 0 99999px rgba(128,128,128,0.2). This was necessary for me because my rows alternate white and light gray, so the original answer didn't change the white. – Dovev Hefetz Apr 20 '17 at 12:09
  • Liked the shadow method a lot. – Maseed Oct 14 '22 at 05:43
13

No, it's not possible.

You could try a CSS pre-processor, though, if you want to do this sort of thing.

From what I could see, at least LESS and Sass have functions that can make colors more, or less, transparent.

mercator
  • 28,290
  • 8
  • 63
  • 72
  • 1
    I always forget about SCSS/LESS. Always. Maybe I need to start actually using them. – BoltClock Aug 05 '11 at 21:07
  • 1
    In SCSS, it is transparentize([color], 0.8). See http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method – Arian Acosta Aug 12 '16 at 02:08
9

It's now 2017 and this is now possible with

CSS custom properties / CSS Variables (Caniuse)

One classic use case for CSS variables is the ability to individualize parts of a property's value.

So here, instead of repeating the whole rgba expression once again - we split up or 'individulaize' the rgba values into 2 parts / variables (one for the rgb value and one for the alpha)

.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
}

Then, on hover we can now just modify the --alpha variable:

a:hover .green, a:hover .brown {
  --alpha: 1;
}


a {
  display: block;
  position: relative;
}
.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  display: inline-block;
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
  font-size: 40px;
  margin: 20px;
}

a:hover .green, a:hover .brown {
  --alpha: 1;
}
<a href="#">
  <div class="brown">Link 1</div>
</a>
<a href="#">
  <div class="green">Link 2</div>
</a>

Codepen

Further reading:

Individualizing CSS Properties with CSS Variables (Dan Wilson)

Danield
  • 121,619
  • 37
  • 226
  • 255
6

there is an alternative,you can add a linear-gradient background image onto the original color.

a{
  background: green
}
a:hover{
  background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
  background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}

also, with css3 filter property,you can do that too,but it seems that it will change the text color

a:hover{
   filter: brightness(80%) //darker
}
a:hover{
   filter: brightness(120%) //lighter
}

here is a jsfiddle:https://jsfiddle.net/zhangyu911013/epwyL296/2/

Yu Zhang
  • 71
  • 1
  • 6
6

No, that's not possible.

If you want to use rgba, you must set each value together. There's no way to only change the alpha.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
3

Why not use :hover and specify a different opacity in the hover class?

a:hover {
     opacity:0.6
}
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
2

I had a similar problem. I had 18 different divs working as buttons, and each with a different color. Rather than figure out the color codes for each or use a div:hover selector to change the opacity (which affects all children) I used the pseudo-class :before like in @Chris Boon's answer.

Because I wanted to do the coloring on the individual elements, I used :before to create a transparent white div on :hover. This is a very basic washout.

#categories div {
    position:relative;
    width:100px;
    height:100px;
    float:left;
    border:1px solid black;
    display:table-cell;
}

#categories div:before{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
}

#categories div:hover:before {
    background-color:white;
    opacity:0.2;
}

#a_Particular_Div {
    background-color:red;
}

According to CanIUse.com, this should have something like 92% support as of early 2014. (http://caniuse.com/#feat=css-gencontent)

Josiah
  • 3,008
  • 1
  • 34
  • 45
2

You can do this with CSS variables, although it's a little messy.

First, set a variable containing just the RGB values, in order, of the color you want to use:

:root {
  --color-success-rgb: 80, 184, 60; 
}

Then you can assign an RGBA value for a color and pull everything but the alpha value from this variable:

.button--success {
  background: rgba(var(--color-success-rgb), 0.8);
}

This isn't super pretty, but it lets you use the same RGB values but different alpha values for a color.

Adam Hollett
  • 421
  • 2
  • 8
  • 1
    This is a reasonable solution to the problem. And, the variable with color doesn't have to be on `:root`, it can be on the class of element, setting its base color. Thanks! – Brad Jun 19 '17 at 21:23
2

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

Matrix
  • 3,458
  • 6
  • 40
  • 76
1

I faced a similar problem. Here's what I did and it works fine( only alpha changes on hover and also the text is not affected) by the following steps:

1) Apply a highlighted(or any of your choice) class to whichever element you wish to change background alpha of.

2) Get the background color rgba

3) Store it in a string and manipulate it(change alpha) as you want on hover(mouseenter and mouseleave)

HTML Code:

<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>

CSS Code:

.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}

Javascript Code:

$(document).on({

            mouseenter: function() {

            var rgba_str = $(this).css("background-color");
            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";   

                $(this).css("background-color",new_rgba_str ); 
               },

             mouseleave: function(){

                 var rgba_str = $(this).css("background-color");

            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";               
                $(this).css("background-color",new_rgba_str ); 

               }

        },'.highlighted');

Working Fiddle:http://jsfiddle.net/HGHT6/1/

Rakhi
  • 135
  • 9
1

Update: It's not possible to do that unfortunately. You'll need to write two separate selectors of:


a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}

According to the W3C, the rgba property doesn't have/support the inherit value.

ayyp
  • 6,590
  • 4
  • 33
  • 47
  • The issue is that `inherit` isn't a valid function argument. You'll notice it doesn't work with any other CSS function. – BoltClock Aug 05 '11 at 21:03
  • By function do you mean things like `rgba` and `transitions`? Because I know it's supported with quite a few of the properties. – ayyp Aug 05 '11 at 21:05
  • Yup, along with `url()`, `attr()` etc too. `inherit` is a property value only. – BoltClock Aug 05 '11 at 21:06
  • I knew about `url()` and transitions already. I just wasn't 100% sure on `rgba` because it's used for colours. Thank you for educating me though :)! – ayyp Aug 05 '11 at 21:07
0

Simple workaround with opacity if you can accommodate a slight change in background-color:

.yourClass {
    // Your style here //
    opacity: 0.9;
}

.yourClass:hover, .yourClass:focus {
    opacity: 0.7;
}

.yourClass:active {
    opacity: 1;
    box-shadow: none;
}

.yourClass:hover, .yourClass:focus, .yourClass:active {
    text-decoration: none;
    outline: none;
}
Alfred Wallace
  • 1,741
  • 1
  • 14
  • 32
0

Building on Yu Zhang's answer:

In :root, (or parent component in Blazor) set css variables:

--bg-img-light: linear-gradient(hsla(255,100%,100%,.2) 100%, transparent 100%);
--bg-img-dark: linear-gradient(hsla(0,0%,0%,.2) 100%, transparent 100%);

Then on any element that you want to apply a hover effect on:

.buttontomakelighter:hover {
  background-image: var(--bg-img-light);
}

.buttontomakedarker:hover {
  background-image: var(--bg-img-dark);
}
Neil W
  • 7,670
  • 3
  • 28
  • 41
-5

This is about the simplest way; put this in your css stylesheet:

a:hover { color : #c00; }

done!

dr. null
  • 197
  • 1
  • 2
  • 7