在悬停时调整背景尺寸

时间：2016-11-15 10:43:46

标签： html css hover opacity

当您将鼠标悬停在图片上时，您会看到它将被我代码中的半透明背景替换。

透明背景应该覆盖所有图片，但是，它只覆盖文本所采用的区域。

无论文本框内的文字是什么，我如何确保它涵盖整个图片？

/*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>

4 个答案:

答案 0 :(得分：6)

从display:table;移除.text-content。还要为其添加bottom:0;。

答案 1 :(得分：3)

删除display: table;，并使用CSS Flexbox的align-content属性垂直对齐内容。

请看下面的代码段：

＆＃13;
＆＃13; 
/*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: flex;
  align-items: center;
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

答案 2 :(得分：2)

＆＃13;
＆＃13; 
/*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;
  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: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

只需添加此Css：

.text-content div{
height:1326px;
}
相关问题
最新问题