当你将鼠标悬停在图像上时,你会发现它会被半透明的背景替换。
透明背景应该覆盖整个图片,但实际上只覆盖了文本所占据的区域。
我该如何确保它覆盖整张图片,而不管盒子内的文本?
透明背景应该覆盖整个图片,但实际上只覆盖了文本所占据的区域。
我该如何确保它覆盖整张图片,而不管盒子内的文本?
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
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;
overflow-y: auto;
}
div.text-content div {
display: block;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.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: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 50px;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}
<ul class="img-list">
<li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />
<div class="text-content">
<div>
<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: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a>
</div>
</div>
</li>
</ul>