使用css

Question

我有一个小问题，它可能只是我正在努力解决它。 对于我的投资组合，我使用了mix-it-up插件。现在我正在尝试添加这个简单的效果，其中一些文本出现在鼠标悬停缩略图时。问题是文本与我的覆盖层具有相同的不透明度，这不是重点，因为它变得不可读。 我知道这可能是一些事情，但我无法弄清楚它是什么。 在此先感谢您的帮助！

这是html：

  <div id="Container">
    <div class="mix illu">
      <img src="" alt="">
      <div class="text-hover">
        <h3>Title</h3>
        <p>Some text</p>
      </div>
    </div>
  </div>

和我的SASS

        .mix { 
          position: relative;
          text-align: center;
          transition: width 2s;
            h3 {
              color: grey;
              font-size: 26px;
            }
            .text-hover {
              position: absolute;
              width: 100%;
              top: 70%;
              left: 0;
              transition: width 2s;
              opacity: 0;
              z-index: 500;
            }
           .text-hover:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100px;
              background-color: white;
              content: '';
              opacity: 0.5;
              z-index: 1;
           }
        }

   .mix:hover {
          .text-hover{
            opacity: 1;
            top: 60%;
            bottom: 0;
          }
    }