Seeking clarity on the opacity property in CSS. My dilemma involves a header with a title, tinted with an opacity of .3 (in addition to a transition effect - irrelevant to the inquiry). Referencing the gif below:
https://i.sstatic.net/LXwPv.gif
I appreciate the translucency offered by the header, allowing visibility of the background image. However, I desire the title itself to display as solid white, at full opacity. Due to the parent div's opacity affecting the header, the text appears faded like the rest of the element. Is there a technique to achieve this? Essentially, is it possible 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>