Opacity for the background color on hover
<p>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?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="img-list"&gt;
  &lt;li&gt;
    &lt;img style="width: 450px; height: 450px;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /&gt;&lt;span class="text-content"&gt;&lt;span&gt;&lt;h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;"&gt;WEBINAR&lt;br/&gt;ARCHIVE&lt;/h5&gt;&lt;hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/&gt;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.&lt;br&gt;&lt;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"&gt;READ MORE&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>