Html CSS标题悬停？

我的页面上有几个div框，我想让它们在您将鼠标悬停在上面时显示文本。我在看一些教程，但我似乎不能让它与我的工作，这里是我的一个盒子的例子

html:

  <div class="squar-1">
    <div class="text-1">
      <p>Hello</p>
    </div>
  </div>

---

这很有效，你写了。text而不是。text-1

.squar-1{
宽度：50%；
高度：350px；
背景色：#e57373；
浮动：左；
}
.squar-1.text-1{
位置：相对位置；
左：0px；
可见性：隐藏；
}
.squar-1:悬停.text-1{
能见度：可见；
}

你好

啊，太好了，谢谢！你知道我怎样才能让它也褪色吗？我尝试了

转换持续时间：600ms但它似乎不起作用，也许我把它放错地方了？我把它放在
.squar-1:hover.text-1{
.squar-1 {
  width: 50%;
  height: 350px;
  background-color: #e57373;
  float: left;
}

.squar-1 .text-1 {
  position:relative;
  bottom:30px;
  left:0px;
  visibility:hidden;
}

.squar-1:hover .text {
visibility:visible;
}