html - 将鼠标悬停在图像上，显示文本和不透明度更改

我现在正在尝试编写一段代码。希望将鼠标悬停在图像上会更改不透明度，并使其中的一些文本可见。

使图像改变不透明性很容易，但是这只是引起我的注意而导致出现问题的文本显示。

我目前的HTML-

.WhyAGradeNotes {
  display: inline-block;
  margin-left: 150px;
  margin-right: 150px;
  height: 300px;
  width: 250px;
  background-image: url("http://www.placehold.it/250x300");
}

.WhyAGradeNotes p {
  visibility: hidden;
}

.WhyAGradeNotes:hover {
  opacity: 0.5;
  .WhyAGradeNotes p {
    visibility: visible;
  }
}

    <section class = "WhyAGrade">
      <span class = "WhyAGradeNotes"><p>Revision Notes</p></span>
      <span class = "WhyAGradeSample"></span>
    </section>

如您所见，我遇到了困难。我想这与可见性状态有关，但我只是想不出如何使其正常工作

最佳答案

试试下面的代码

.WhyAGradeNotes {
	display: inline-block;
	margin-left: 150px;
	margin-right: 150px;
	height: 300px;
	width: 250px;
	background-image: url("http://www.placehold.it/250x300");
}
.WhyAGradeNotes p {
	visibility: hidden;
}
.WhyAGradeNotes:hover {
	opacity: 0.5;
}
.WhyAGradeNotes:hover p {
	visibility: visible;
}

<section class = "WhyAGrade">
    <span class = "WhyAGradeNotes">
      <p>Revision Notes</p>
    </span>
    <span class = "WhyAGradeSample"></span>
</section>