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

您可以更改不透明度，例如在Julio上展示的option2

或者您可以像在Ana

上演示的option1一样限制叠加层

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>

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

2 个答案: