How to use focus instead of hover in mobile view

Question

I just learned that hover does not work in mobile and I am not too sure where to apply the "focus" instead in my css code as suggested by someone. I am a little pressed for time at this point and hope there is a quick way to fix this. Thanks.

HTML:

<div style="width: 100%">
    <ul class="img-list2">
        <li>Building of the Year<span class="text-content2">The Architect’s Newspaper publishes four regional editions—East, West, Midwest, and Southwest. We’re seeking the best new building in each of these regions. </span></li>
        <li>Adaptive Reuse<span class="text-content2">Adaptive Reuse</span></li>
        <li>Architectural Lighting<span class="text-content2">Architectural Lighting</span></li>
    </ul>
    <ul class="img-list2">
    <li>Architectural Models<span class="text-content2">Whichever form is your favorite—virtual or analog, interior or exterior, landscaping or urban— show the world how you build, just at a smaller scale. Your model does not need to have come to fruition. All scaled architecture types are eligible.</span></li>
    <li>Building Renovation<span class="text-content2">Building Renovation</span> </li>
    <li>Civic Institutions<span class="text-content2">This category is in pursuit of educational, academic, governmental or social institutions whose design not only elevates, but also is central to the organization’s mission.</span></li>
    </ul>
    <ul class="img-list2">
        <li>Digital Fabrication <span class="text-content2">We’re seeking the best architectural applications of building components. These can be digital fabrications or parametric designs. </span></li>
        <li>Facade<span class="text-content2">Facade</span></li>
        <li>Interior, Non-Residential<span class="text-content2">Interior, Non-Residential</span></li>
    </ul>
    <ul class="img-list2">
        <li>Interior, Residential<span class="text-content2">Interior, Residential</span></li>
        <li>Landscape<span class="text-content2">Landscape</span></li>
        <li>Residential, Multi-Unit<span class="text-content2">Residential, Multi-Unit</span></li>
    </ul>
    <ul class="img-list2">
        <li>Residential, Single Family<span class="text-content2">Residential, Single Family</span></li>
        <li>Student Work<span class="text-content2">Projects that are built or unbuilt are eligible. Students must be in an accredited architectural school or graduated from their program with in the last academic year. </span></li>
        <li>Temporary Installation<span class="text-content2">Whether your installation is a site-specific exhibition or it created an entirely new site, enter your work that showcases materials, techniques and invention.</span></li>
    </ul>
    <ul class="img-list2">
        <li>Unbuilt<span class="text-content2">On the boards or in the drawers, these projects should be seen. Any building project that got left behind or didn’t get it’s chance to see the light of day—a second or non-placing competition entry, a project for a client who decided to go another route, etc.—this category gives your project a second chance. </span></li>
        <li>Urban Design<span class="text-content2">Built or unbuilt, enter your design plans that focus on groupings of buildings, street and public spaces to create a more sustainable and functional neighborhood or city.</span></li>
        <li>Young Architects Award<span class="text-content2">Emerging architects or firms often have the talent but don’t always get the glory. This category seeks to celebrate the work of young practices (10 years or less) or professionals (35 years or less). All project types are eligible</span></li>
    </ul>
</div>

CSS:

ul.img-list2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    margin: 2px 0 2px 0;
    height:95px;
}

ul.img-list2 li {
    display: inline-block;
    position: relative;
    margin: 0 0 0 0;
    padding: 20px 20px 20px 20px;
    background-color:#000;
    color:#08f7c2;
    width:32%;
    line-height:145%;
    font-size: 15px;
    height:95px;
    vertical-align:middle;
}

span.text-content2 span {
    display: table-cell;
    text-align:left;
    padding:10px;
}

span.text-content2 {
    background-image: url("http://awards.archpaper.com/wp-  content/uploads/2015/08/cat_overlay_bg_new4.png");
    cursor: pointer;
    display: table;
    height: 245%;
    left: 0;
    position: absolute;
    top: 0!important;
    width: 120%;
    min-width:250px;
    opacity: 0;
    transform:scale(1);
    font-size:15px;
    font-weight:normal;
    line-height:145%;
    color:#fff;
    text-align:left;
    padding:23px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

ul.img-list2 li:hover span.text-content2 {
    opacity: 1;
    z-index: 99;
}