CSS: Why is opacity applying ONLY to the children and NOT to the parent element?

Question

I have set the opacity of a specific parent element (.container). It is not applying to the container but only to the children (.donate-btn) inside of the container (eventually I want the opposite to be true, for the parent to have reduced opacity and the children to be solid, for which there are multiple answers in SO, but I don't seen anything with the reverse issue). The parent(#main) of the .container has a background image.

When I first started playing with the opacity, the parent div was showing the applied opacity. For some reason it is not and I don't know what changed.

Here is the relevant CSS:

.container {

   margin-right: 10%;
   margin-left: 10%;
   display: block;
   padding: 30px;
   padding: top 300px;
   opacity: .5;
   border: 2px solid black;
   border-radius: 2em;
}

.donate-btn{
    border: 2px solid black;
    border-radius: 2em;
    display: inline-block;
    margin: 15px;
    padding: 15px;
    width: 200px;
    height: 80px;

}

HTML:

<section id="main"> 
        <div class="container">
            <form id="sendDonation">
                <input id='donation-amt' type="hidden" name="amount">
                <button class='donate-btn' data-amt='25'>
                    <div class='amt'>$25</div>
                </button>
                <button class='donate-btn' data-amt='50'>
                    <div class='amt'>$50</div>
                </button>
                <button class='donate-btn' data-amt='100'>
                    <div class='amt'>$100</div>
                </button>
      </form>
     </div>
</section>

Here is a jsfiddle. I set the background to green (rather than an image) for simplicity.

Why is the opacity of the .container not changing, only the children? How can I get the opacity of the .container to change?

Answer 1

That is because your container doesn't have a background color - the default is transparent.

This illusion make it seem that opacity doesn't affect the container, which in fact it does.

To see the opacity effect clearly, add a solid background color:

#main {
  /* background-image: url("img/donate-background.jpg"); */
  background-color: green;
  background-size: cover;
  padding-top: 30px;
  padding-bottom: 30px;
}
.container {
  margin-right: 10%;
  margin-left: 10%;
  display: block;
  padding: 30px;
  padding: top 300px;
  opacity: .5;
  border: 2px solid black;
  border-radius: 2em;
  background: white;
}
.donate-btn {
  border: 2px solid black;
  border-radius: 2em;
  display: inline-block;
  margin: 15px;
  padding: 15px;
  width: 200px;
  height: 80px;
}

<section id="main">
  <div class="container">
    <form id="sendDonation">
      <input id='donation-amt' type="hidden" name="amount">
      <button class='donate-btn' data-amt='25'>
        <div class='amt'>$25</div>
      </button>
      <button class='donate-btn' data-amt='50'>
        <div class='amt'>$50</div>
      </button>
      <button class='donate-btn' data-amt='100'>
        <div class='amt'>$100</div>
      </button>
    </form>
  </div>
</section>

Answer 2

Your .container element does have opacity, however there is no content/background/anything inside (directly) on that element to make it opacity.

If (for example) you will set the background of your .container to red you can see that it has opacity:

body {
  background: white;
}
#main{
 /* background-image: url("img/donate-background.jpg"); */
 background-color: green;
  background-size: cover;
 padding-top: 30px;
 padding-bottom: 30px;
    
}

.container {
    margin-right: 10%;
    margin-left: 10%;
    display: block;
    padding: 30px;
    padding: top 300px;
    opacity: 0.5;
    border: 2px solid black;
    border-radius: 2em;
       background: red;
    }

    .donate-btn{
  border: 2px solid black;
  border-radius: 2em;
  display: inline-block;
  margin: 15px;
  padding: 15px;
  width: 200px;
  height: 80px;
     
 }

<section id="main"> 
  <div class="container">
   <form id="sendDonation">
    <input id='donation-amt' type="hidden" name="amount">
    <button class='donate-btn' data-amt='25'>
     <div class='amt'>$25</div>
    </button>
    <button class='donate-btn' data-amt='50'>
     <div class='amt'>$50</div>
    </button>
    <button class='donate-btn' data-amt='100'>
     <div class='amt'>$100</div>
    </button>
      </form>
     </div>
</section>