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

by

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.

More Related Contents:

  1. How to change the cursor into a hand when a user hovers over a list item?
  2. Semi-transparent color layer over background-image?
  3. What is the opposite of :hover (on mouse leave)?
  4. Background color of text in SVG
  5. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  6. Is there any way to hover over one element and affect a different element? [duplicate]
  7. Change opacity on all elements except hovered one
  8. CSS: Set a background color which is 50% of the width of the window
  9. How to use ‘hover’ in CSS
  10. CSS hexadecimal RGBA?
  11. CSS background opacity with rgba not working in IE 8
  12. How can I delay a :hover effect in CSS?
  13. SVG USE element and :hover style
  14. Does css hover work on mobile devices?
  15. CSS disable hover effect
  16. What is the difference between background and background-color
  17. How can I change a button’s color on hover?
  18. Spin or rotate an image on hover
  19. Is background-color:none valid CSS?
  20. image moves on hover – chrome opacity issue
  21. CSS: styled a checkbox to look like a button, is there a hover?
  22. hover on child without hover effect on parent [duplicate]
  23. Background with 2 colors in JavaFX?
  24. CSS: background image on background color
  25. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  26. Overlay a background-image with an rgba background-color
  27. How to display and hide a div with CSS?
  28. Hover on child should turn off hover effect on parent [duplicate]
  29. Is there an opposite CSS pseudo-class to :hover?
  30. prevent a pseudo element from triggering hover?

Leave a Comment