Opacity for the background color on hover

Question

In my code the color of the font interferes with the color of the background on hover. If you hover over the image and look at the line 'Webinar archive', you'll see that the color of the font is partially white. How do I fix this and make sure that the font is white?

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.img-list li {
  display: inline-block;
  height: 450px;
  margin: 0;
  position: relative;
  width: 450px;
}
span.text-content {
  background: #1a212b;
  color: white;
  cursor: pointer;
  display: table;
  height: 450px;
  left: 0;
  position: absolute;
  top: 0;
  width: 450px;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  box-sizing: border-box;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
  box-sizing: border-box;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
ul.img-list li:hover span.text-content {
  opacity: 0.9;
}
/* Events page */

/*Event link button*/

.btn {
  background-color: transparent;
  border-radius: 42px;
  border: 2px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  font-family: Montserrat;
  line-height: 28px;
  font-size: 20px;
  padding: 5px 15px 5px 15px;
}
.btn:hover {
  background-color: #ffffff;
  color: #484848 !important;
}
.btn:active {
  position: relative;
  top: 1px;
}
.btn:link {
  color: #ffffff;
  text-decoration: none;
}
.btn:visited {
  color: #1b1c16;
  text-decoration: none;
}

<ul class="img-list">
  <li>
    <img style="width: 450px; height: 450px;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /><span class="text-content"><span><h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5><hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 28px; border: 3px solid white;" href="http://www.google.com/" target="_blank">READ MORE</a></span></span>
  </li>
</ul>

Answer 1

In your code you set the opacity on hover on 0.9. This means that the whole element (including its children) will be semi-transparent. It seems that you want only a semi-transparent background, though. For that you need to add an alpha channel to your background color, e.g. by using rgba values, which will not affect the other elements.

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.img-list li {
  display: inline-block;
  height: 450px;
  margin: 0;
  position: relative;
  width: 450px;
}
span.text-content {
  background: rgba(26, 33, 43, 0.9);
  color: white;
  cursor: pointer;
  display: table;
  height: 450px;
  left: 0;
  position: absolute;
  top: 0;
  width: 450px;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  box-sizing: border-box;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
  box-sizing: border-box;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
ul.img-list li:hover span.text-content {
  opacity: 1;
}
/* Events page */

/*Event link button*/

.btn {
  background-color: transparent;
  border-radius: 42px;
  border: 2px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  font-family: Montserrat;
  line-height: 28px;
  font-size: 20px;
  padding: 5px 15px 5px 15px;
}
.btn:hover {
  background-color: #ffffff;
  color: #484848 !important;
}
.btn:active {
  position: relative;
  top: 1px;
}
.btn:link {
  color: #ffffff;
  text-decoration: none;
}
.btn:visited {
  color: #1b1c16;
  text-decoration: none;
}

<ul class="img-list">
  <li>
    <img style="width: 450px; height: 450px;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg">
    <span class="text-content">
      <span>
        <h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5>
        <hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;">
        Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.<br>
        <a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 28px; border: 3px solid white;" href="http://www.google.com/" target="_blank">READ MORE</a>
      </span>
    </span>
  </li>
</ul>