CSS图像叠加不适用于移动设备

Question

这让我发疯了。在移动设备上，当您点按投资组合图片时，会出现文字叠加层。这肯定是以前工作，但后来我一直在添加更多的HTML和CSS，现在它不起作用。我尝试恢复旧的提交，玩css，但我无法弄清楚是什么导致它停止工作。

这是我的html代码和css：

    <div class="projects">
      <a name="projects"></a>
      <div class="hold-it">
        <img src="Stranger_places.jpg" alt="Stranger Places" />
        <span class="overlay"><h4>Stranger Places&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i>
</h4><p>Conceived due to my love for traversing wild and exotic landscapes. It is a Web App for travelers looking to get off the beaten path. Made with HTML5, Ruby, JS, and Bootstrap on a Rails framework.</p><a href="https://github.com/jcotzin/Stranger_Places" target="_blank" title="Github"><i class="fa fa-github fa-3x" aria-hidden="true">&emsp;</i></a></span>
      </div>
      <div class="hold-it">
        <img src="coding_resources.png" />
        <span class="overlay"><h4>codeXhunter&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i></h4><p>A Web App for discovering and sharing Web Developers' favorite coding resources. Made with HTML5, Ruby, JS and Materialize on a Rails framework.</p><a href="https://github.com/jcotzin/Coding_Resources" target="_blank" title="Github"><i class="fa fa-github fa-3x" aria-hidden="true">&emsp;</i></a></span>
      </div>
      <div class="hold-it">
        <img src="shouni.png" />
        <span class="overlay"><h4>Shouni</h4><p>Shouni is an anime generator app for fellow anime-lovers. Never get bored on those lonely nights! Shouni was made with HTML5, jQuery and Ruby on a Rails framework. </p>
<a href="https://github.com/JAnderson88/shouni" target="_blank" title="Github"><i class="fa fa-github fa-3x" aria-hidden="true">&nbsp;</i></a><a href="https://stormy-badlands-22918.herokuapp.com/" ><i class="fa fa-arrow-circle-o-right fa-3x" aria-hidden="true"></i>
</a></span>
      </div>
    </div>


  * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .projects {
    max-width: 100%;
    height: auto;
    margin: 40px auto auto auto;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    background-color: #f1f1f1;
    padding: 15px;
    margin-bottom: 50px;
    content: "";
    display: table;
    clear: both;
    width: auto;
  }

  .hold-it {
    position: relative;
    width: 300px;
    height: 265px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    overflow: hidden;
    margin-bottom: 4%;
  }

  .overlay {
    display: block;
    position: absolute;
    top: auto;
    right: auto;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 10px;
    color: #fff;
    background-color: #000;
    opacity: 0;
    -webkit-transition: all 250ms ease-in;
    -moz-transition: all 250ms ease-in;
    -ms-transition: all 250ms ease-in;
    -o-transition: all 250ms ease-in;
    transition: all 250ms ease-in;
  }

  .hold-it:hover .overlay {
    opacity: .75;
  }

  .hold-it p {
    position: absolute;
    bottom: 0;
    padding-bottom: 10%;
    margin: auto;
    font: 100 18px "Helvetica Neue";
    letter-spacing: 1px;
  }

  .hold-it h4 {
    position: relative;
    bottom: 0;
    padding-bottom: 6px;
    margin: auto;
    font: 100 24px "Helvetica Neue";
    letter-spacing: 1px;
  }

  .hold-it img {
    height: 300px;
    width:335px
  }