Text overlay hiding behind image next to it

Question

I'm trying to create text overlay on top of jury images however my text overlay seems hidden behind images next to it or below in 2nd row. Ideally I would like to make the overlay even larger but I have this issue. See screenshot. Is there anything I should add to the code or change?

<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

If you want the overlay to appear on top of the other images you need to set the z-index of the overlay also.

Example here http://codepen.io/anon/pen/doQjZG?editors=110

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

Also never set opacity or z-index any higher than absolutely necessary. This could cause problems later on if you want an element to supersede these values.

Answer 2

you can change the opacity like in option2 demonstrated on Julio

or you can confine the overlay like in option1 demonstrated on 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>