文本叠加隐藏在旁边的图像后面

Question

我正在尝试在陪审团图像之上创建文本叠加层，但我的文本叠加层似乎隐藏在它旁边或第二行下方的图像后面。理想情况下，我想让叠加层更大，但我遇到了这个问题。见截图。有什么我应该添加到代码或更改的吗？

<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;
}

Answer 1

如果您希望叠加层出现在其他图像之上，您还需要设置叠加层的 z-index。

此处示例http://codepen.io/anon/pen/doQjZG?editors=110

ul.img-list li:hover span.text-content {
  opacity: 99;
  z-index: 99;
}

此外，切勿将不透明度或 z-index 设置得高于绝对必要的值。如果您希望元素取代这些值，这可能会在以后引起问题。

Answer 2

您可以像 option2 在 Julio

上演示的那样更改不透明度

或者您可以像 option1 在 Ana

上演示的那样限制叠加层

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;
}

span.option1 {
    height: 163px;
    width: 163px;
    margin-left: 18px;
    overflow-y: auto;
    display: block;
}

span.option2 {
    z-index: 5;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 option1">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="option2 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 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>

文本叠加隐藏在旁边的图像后面

Text overlay hiding behind image next to it

html

css

text

overlay

image