title: CSS how to change opacity of container but not text?
body: <p>I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image to a lower opacity. I've got the fade all worked out, as well as the opacity change. My only issue is that the text, which is contained within the element I want to fade, also fades and I would like to keep it at 100% opacity. I have tried setting opacity to 1 for the text but it does not override the opacity change of its container. For example, I have:</p>
  
  <pre><code>&lt;div class="textbox"&gt;
  
  &lt;p class="boxtext"&gt;This is the text that will eventually go inside the box. It is blah lljsd iofu isduf iou eiosu dfi eiou sdiofu ioe soidfu oidu foiu foisu doiu eoiusodidfu oei osidfuosdiu ieu oisduf oiueoisu dfoi oiu soifu iod fioeo dfs.&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And also</p>
  
  <pre><code>div.textbox {
  background-color: white;
  margin-left: 2.5vw;
  border: 2px solid lightgray;
  width: 15vw;
  height: 600px;
  float: left;
  }
  
   div.textbox:hover {
  background-color: lightgray;
  border: 2px solid lightgray;
  opacity: 0.5;
  }
  
  p.boxtext {
  margin: 5% 5%;
  }
  </code></pre>
  
  <p>This creates the hover that I want, but I can't keep the text opacity at 100%.</p>
  
  <p>Edit: Thank you for providing the rgba() solution, this solves the problem. I have another case of the same problem except that there is a background image instead of a solid background color. Is there a similar workaround?</p>
  
  <p>Edit2: Issues with fade breaking after replacing opacity change with a separate transparent .png.</p>
  
  <pre><code>a#imglink1 {
  background-image: url('https://www.profilesinhistory.com/wp-content/uploads/2012/11/Apollo-11-NASA-Photograph-Signed-Neil-Armstrong-Michael-Collins-Buzz-Aldrin-200x200.jpg');
  width: 200px;
  height: 200px;
  float: left;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  }
  
  a#imglink1:hover {
  background-image: url('../images/apollo_transparent.png');
  -o-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  }
  
  a#imglink1:hover p {
  visibility: visible;
  }
  </code></pre>