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

Question

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

让图像改变不透明度很容易，但我只是想着让导致问题的文本显示。

目前我的 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>

如您所见，我遇到了困难。我猜它与可见性状态有关，但我不知道如何让它正常工作

Answer 1

试试下面的代码

.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>