我正在尝试在陪审团图像上方创建文字叠加层，但是我的文字叠加层似乎隐藏在其旁边或第二行下方的图像后面。理想情况下，我想使覆盖范围更大，但是我遇到了这个问题。查看截图。有什么我应该添加到代码或更改的内容吗？
<div>
<ul class="img-list">
<li><a href="awards.archpaper.com" target="_blank"><img src="http://awards.archpaper.com/wp-content/uploads/2015/07/Ana_Garcia_Puyol_190x190.jpg" alt="" width="170" height="170" /> <span class="text-content">Ana holds a Master in Design Studies with a concentration in Technology from the Graduate School of Design at Harvard University. The Spanish-born architect's work at Thornton Tomasetti’s CORE studio focuses on the research and development of tools and workflows that support the collaboration between architects and engineers. Her GSD team project, Horizon House, won AN’s 2015 Best of Design Awards: Student Built Work.</span> </a><strong>Ana Garcia Puyol</strong><br>Computational Designer<br>Thornton Tomasetti</li>
<li><a href="awards.archpaper.com" target="_blank"> <img src="http://awards.archpaper.com/wp-content/uploads/2015/07/chee_perlman_190x190.jpeg" alt="" width="170" height="170" /> <span class="text-content">Duis venenatis consectetur diam, vitae porttitor lectus condimentum congue. Suspendisse a condimentum urna, eu interdum metus. Proin sagittis libero ut orci dapibus eleifend. Proin laoreet semper mauris, ac hendrerit risus fringilla eu. Donec sollicitudin risus quis nibh sollicitudin hendrerit.</span> </a><strong>Chee Perlman</strong><br>Title<br>Firm</li>
<li><a href="awards.archpaper.com" target="_blank"> <img src="http://awards.archpaper.com/wp-content/uploads/2015/07/juror_grey.jpg" alt="" width="170" height="170" /> <span class="text-content">Duis venenatis consectetur diam, vitae porttitor lectus condimentum congue. Suspendisse a condimentum urna, eu interdum metus. Proin sagittis libero ut orci dapibus eleifend. Proin laoreet semper mauris, ac hendrerit risus fringilla eu. Donec sollicitudin risus quis nibh sollicitudin hendrerit.</span> </a><strong>Terry Riley</strong><br>Title<br>Firm</li>
<li><a href="awards.archpaper.com" target="_blank"> <img src="http://awards.archpaper.com/wp-content/uploads/2015/07/Julio_Braga_190x190.jpg" alt="" width="170" height="170" /> <span class="text-content">Julio joined IA Interior Architects as Design Director/ Principal of the New York office in 2005. During his tenure, he has driven the growth and development of the New York office. The Argentinian-born designer oversees New York’s design staff and sets design direction for all IA/NYC projects. Sharply efficient planning, a restrained design approach, and fluency in the language of environmental branding are characteristics that define his work. Julio has been a Vice-President of IIDA’s International Board of Directors since 2012, and was Board President from June 2014 to June 2015. He was inducted to the IIDA College of Fellows in June 2015.</span> </a><strong>Julio Braga</strong><br>Principal<br>IA Interior Architects</li></ul>
</ul>
<ul class="img-list">
<li><a href="awards.archpaper.com" target="_blank"> <img src="http://awards.archpaper.com/wp-content/uploads/2015/07/juror_grey.jpg" alt="" width="170" height="170" /> <span class="text-content">Duis venenatis consectetur diam, vitae porttitor lectus condimentum congue. Suspendisse a condimentum urna, eu interdum metus. Proin sagittis libero ut orci dapibus eleifend. Proin laoreet semper mauris, ac hendrerit risus fringilla eu. Donec sollicitudin risus quis nibh sollicitudin hendrerit.</span> </a><strong>Craig Dykers</strong> <br>Title<br>Firm</li>
<li><a href="hawards.archpaper.com" target="_blank"> <img src="http://awards.archpaper.com/wp-content/uploads/2015/07/juror_grey.jpg" alt="" width="170" height="170" /> <span class="text-content">Duis venenatis consectetur diam, vitae porttitor lectus condimentum congue. Suspendisse a condimentum urna, eu interdum metus. Proin sagittis libero ut orci dapibus eleifend. Proin laoreet semper mauris, ac hendrerit risus fringilla eu. Donec sollicitudin risus quis nibh sollicitudin hendrerit.</span> </a><strong>Mimi Zeigler</strong><br>Title<br>Firm</li>
<li><a href="awards.archpaper.com" target="_blank"> <img src="http://awards.archpaper.com/wp-content/uploads/2015/07/juror_grey.jpg" alt="" width="170" height="170" /> <span class="text-content">Duis venenatis consectetur diam, vitae porttitor lectus condimentum congue. Suspendisse a condimentum urna, eu interdum metus. Proin sagittis libero ut orci dapibus eleifend. Proin laoreet semper mauris, ac hendrerit risus fringilla eu. Donec sollicitudin risus quis nibh sollicitudin hendrerit.</span></a><strong>Name</strong><br>Title<br>Firm</li>
</ul>
</div>
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
margin: 0 5px 25px 0;
}
ul.img-list li {
display: inline-block;
height: 190px;
margin: 0 1em 1em 0;
position: relative;
width: 190px;
margin: 0 5px 25px 0;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: top;
text-align:left;
padding:10px;
font-size:11px;
}
span.text-content {
background :rgba(8,247,194,1);
cursor: pointer;
display: table;
height: 190px;
left: 0;
position: absolute;
top: 0!important;
width: 190px;
opacity: 0;
transform:scale(1.1);
font-size:11px;
line-height:145%;
color:#000;
text-align:left;
padding:15px;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
最佳答案
如果您希望叠加层显示在其他图像的顶部，则还需要设置叠加层的z索引。
此处的示例http://codepen.io/anon/pen/doQjZG?editors=110
ul.img-list li:hover span.text-content {
opacity: 99;
z-index: 99;
}
同样，绝对不要将不透明度或z-index设置得比绝对必要高。如果您想让一个元素取代这些值，可能会在以后引起问题。
关于html - 文字叠加层隐藏在其旁边的图像后面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31710275/