Непрозрачность цвета фона при наведении

Question

В моем коде цвет шрифта мешает цвету фона при наведении. Если вы наведите курсор на изображение и посмотрите на строку «Архив веб-семинаров», вы увидите, что цвет шрифта частично белый. Как исправить это и убедиться, что шрифт белый?

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

В своем коде вы установите непрозрачность на парении на 0,9. Это означает, что весь элемент (включая его детей) будет полупрозрачным. Похоже, что вам нужен только полупрозрачный фон. Для этого вам нужно добавить альфа-канал к цвету фона, например. используя значения rgba, которые не будут влиять на другие элементы.

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>