HTML CSS: Show Black text with Opacity Layer

Question

I am trying to see a black text description. For some reason I can see white Title, but cannot locate black description. I would like to conduct this changing opacity values. How would this be conducted? tried making description z-index very high.

.imagesidecaption {
      border-color: blue;
      border-style: solid;
      border-width: 1px;
      background-color: #ffffff;
      opacity: 1;
  }

  .imagesidecaptionfulltext {
      background-color: #000000;
      opacity: .2;
      height: 100%;
  }

  .imagesidecaptiontitle {
      color: white;
  }

  .imagesidecaptiondescription {
      color: black;
      z-index : 4;
  }

<span class="imagesidecaptioncontainer">
    <div class="imagesidecaption" style="width: 280.00px; height: 140px;">
        <div class="imagesidecaptionfulltext" id="imagesidecaptionfulltextid2">
            <div class="imagesidecaptiontitle" id="imagesidecaptiontitleid">White text<br></div>
            <div class="imagesidecaptiondescription" id="imagesidecaptiondescriptionid">Description: Would like to see Black Text description</div>
        </div>
    </div>
</span>

score 2 · Accepted Answer · edited Jul 12 '19 at 21:04

Instead of

background-color : #000000;
opacity : 0.2;

you can use background-color: rgba(0,0,0,0.2);

.imagesidecaption {
    border-color: blue;
    border-style: solid;
    border-width: 1px;
    background-color: #ffffff;
    opacity: 1;
}

.imagesidecaptionfulltext {
  /* background-color : #000000; 
     opacity : 0.2 
   */
    background-color: rgba(0,0,0,0.2);
    height: 100%;
}

.imagesidecaptiontitle {
    color: white;
}

.imagesidecaptiondescription {
    color: black;
    opacity : 1;
    position :absolute;
    z-index : 5;
    
}

<span class="imagesidecaptioncontainer">
     <div class="imagesidecaption" style="width: 280.00px; height: 140px;"> 
           <div class="imagesidecaptionfulltext" id="imagesidecaptionfulltextid2"> 
               <div class="imagesidecaptiontitle" id="imagesidecaptiontitleid">White Title <br></div><div class="imagesidecaptiondescription" id="imagesidecaptiondescriptionid">Description: Would like to see Black Text description</div></div></div></div></span>

score 1 · Answer 2 · answered Jul 12 '19 at 20:36

It isn't z-index that's causing your problem, it's that opacity is passed from parent to child. So your 'black' text is inheriting opacity:0.2 from the outer parent. You need to re-structure your elements to either remove the opacity from the parent, or to move the children out.

HTML CSS: Show Black text with Opacity Layer

2 Answers2