Html 无法使用css显示文本覆盖

我想我很接近，但我不知道我错过了什么。 我使用的代码与此小提琴上的代码相同：

HTML:

---

代码在小提琴上工作，但在我的网站上不工作。 div中的文本没有显示在我的网站上。

---

有人能告诉我为什么会发生这种情况吗？

不仅

标签拼写错误为
，而且
没有关闭。JSFIDLE更新如下：






另外，用
包装
是完全错误的。我们将进一步调试CSS，但您可能需要澄清最终结果是什么。就目前而言，这真的很混乱，很难理解。我认为它现在可以工作了，但根据代码的格式，我仍然不确定。
请检查。这就是你要找的吗？基本上，不要对不透明度进行调整，而是在常规
上使用
display:none
。img overlay
css，然后在
上更改为
display:block
：hover
。这在你的网站上有效吗？我还对未关闭的
ui
标签做了@JakeGould建议的编辑，假设你是指
ul

还有，为什么这条线在这里

text-indent:-9000px;

我把它评论了出来，一切看起来都很棒。让我知道这是否解决了您的问题。
“代码在小提琴上工作，但在我的网站上不工作。”那么JSFIDLE的意义是什么？请把相关的代码放在这里。我重新格式化了代码。我希望它更容易阅读。是的，ul标签我忘了复制，但它就在我的网站上。我遇到的问题是div中的文本没有显示，但覆盖显示。这更清楚吗？哦，哇，这根本不是我想你说的。我会再看一遍。你是否像@JakeGould所说的那样从主
.img overlay
css中删除了两条不透明度线？作为记录，@AustinMullins我从未建议他删除任何css，更不用说不透明度线了。一般来说，我认为HTML结构和CSS结构从一开始就非常混乱。因此，我建议根据最终输出的要求进行整体重新编码。这是只有原始海报才能做到的。@Austin:我也看到了，我认为这是以前尝试其他东西时的旧代码。文本缩进是问题所在。我删除了它，它就起作用了。谢谢！。
  .projectGrid li {
 display: inline-block;
 margin: 0 20px 20px;
 box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
 opacity:0.7;
 border-radius: 11px;
 -moz-border-radius: 11px;
 -webkit-border-radius: 11px;

 text-indent: -9000px;
-webkit-transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;
-moz-transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;
-o-transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;
-ms-transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;
 transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;

 }  
   .projectGrid li a {
   display: block;
   width: 280px;
   height: 280px;
   background-color: grey;
   border: solid;
   border-radius: 11px;
  -moz-border-radius: 11px;
  -webkit-border-radius: 11px;
  } .projectGrid li:hover {
   box-shadow: 0px 0px 8px rgba(0,0,0,0.7);
   opacity:1.0;

  }
 #project-1 {
    height:286px;
    overflow:hidden;
    position:relative;
    width:286px;
 }
.img-overlay {
    background-color:#000;
    bottom:0;
    color:#fff;
    opacity:0;
    filter: alpha(opacity=0);
    position:absolute;
    width:100%;
    z-index:1000;
}
#project-1:hover .img-overlay {
    opacity:0.75;
    filter: alpha(opacity=75);
    transition:opacity 0.25s;
    -moz-transition:opacity 0.25s;
    -webkit-transition:opacity 0.25s;
}
#project-1 a {
    background: url('../images/1.png') no-repeat scroll;
    background-size: 280px 280px;
}

<ul class="blah">
  <li id="project-1">
      <a href="#">
      <div class="img-overlay">
          <h4>Title</h4>
          <p>A description of the image</p>
      </div>
      </a>
  </li>
</ul>

text-indent:-9000px;