ホバーの背景色の不透明度

Question

私のコードでは、フォントの色がホバーの背景の色と干渉します。画像の上にマウスを置いて 'Webinar archive'という行を見ると、フォントの色が部分的に白であることがわかります。これを修正し、フォントが白であることを確認するにはどうすればよいですか？あなたのコードで

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>