nobetterdan nobetterdan - 9 days ago 5
CSS Question

Hover over image, display text & opacity change

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

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>