Hover over image, display text & opacity change

Question

I'm trying to work on a piece of code now. The hope is that hovering over the image changes the opacity and also makes some text visible within it.

The getting the image to change opacity is easy, but it's just getting my head around having the text display that is causing the issue.

My HTML at the moment -

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

As you can see, I'm having difficulty. What I'm guessing is that it has to do with the visibility states, but I just can't figure out how to have it working properly

Answer 1

try this below code

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

Answer 2

Firstly, you are missing a } after opacity:0.5;. You also have an extra } at the end of your CSS. Unless you are using a preprocessor, but even then your syntax would be incorrect.

Secondly, you need to set visibility: visible on the p only when .WhyAGradeNotes is hovered.

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