Opacity in CSS applying to child div

Question

Question about the opacity property in CSS. I have a header with a title, and I have an opacity of .3 applied to it (as well as a transition, but that's not what the question is about). Here is a gif:

Now, I like the effect the header has, as you can see the image behind it obviously, but I would like title itself to appear white, at opacity 1. Because of the opacity applied to its parent div, the header, it appears faded like the rest of the div. Is there a way to do this? in other words, is there a way to "override" the opacity of a parent element?

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: absolute;
  width: 100vw;
  height: 0vh;
  background-color: black;
  opacity: 0;
  z-index: 6;
  transition: height 1s ease, opacity 1s ease;
}

#hoverable {
  position: absolute;
  height: 10vh;
  width: 100%;
  z-index: 7;
}

#hoverable:hover #header {
  opacity: .3;
  height: 10vh;
}

#title {
  margin-left: 10vw;
  line-height: 10vh;
  float: left;
}

<div id="hoverable">
  <div id="header">
    <div id="title">
      <h1>TITLE</h1>
    </div>
  </div>
</div>

Possible duplicate of [I do not want to inherit the child opacity from the parent in CSS](http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css) — Flardryn, Mar 15 '17 at 06:13

score 0 · Accepted Answer · answered Mar 15 '17 at 06:07

Instead of opacity you can use background-color: rgba(0,0,0,0); and background-color: rgba(0,0,0,.3);

RGBA stands for red green blue alpha.

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: absolute;
  width: 100vw;
  height: 0vh;
  background-color: rgba(0,0,0,0);
  z-index: 6;
  transition: height 1s ease, background 1s ease;
}

#hoverable {
  position: absolute;
  height: 10vh;
  width: 100%;
  z-index: 7;
}

#hoverable:hover #header {
  background-color: rgba(0, 0,0,.3);
  height: 10vh;
}

#title {
  margin-left: 10vw;
  line-height: 10vh;
  float: left;
}

<div id="hoverable">
  <div id="header">
    <div id="title">
      <h1>TITLE</h1>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Mar 15 '17 at 06:25

I see you're using Id for your div's. Maybe you could use classes instead.

Styles in a CSS file are supposed to “cascade”. So, theoretically, this should allow styles declared later in your stylesheet to override styles that are declared earlier. But because of more specific selectors (like IDs), this doesn’t happen as often as we’d like.

For example, if you had the following HTML:

<div id="element" class="element">
<!-- stuff goes here... -->
</div>

And CSS:

#element {
background: blue;
}

body div.element {
background: green;
}

Even though the body div.element selector appears after the #element ID selector, and despite the fact that the “body” element is included as part of the selector, the background of the element will be blue — not green — because the ID selector is more specific than the second selector, and the natural cascade has been overridden.

https://www.impressivewebs.com/difference-class-id-css/

Opacity in CSS applying to child div

2 Answers2