I am trying to create a hover effect on staff members' images where the information about the staff member should appear when the mouse hovers over the image. I have written code to change the display property from 'none' to 'block' for the .staffInfo class, but it doesn't seem to be working. There are no console errors and this is part of an Angular project.
HTML
<div class="col-lg-12 staffBlock">
<div ng-repeat="people in staff">
<div class="col-lg-4 staffCards">
<img src="{{people.image}}" alt="" class="img-rounded img-responsive">
<div class="staffInfo">
<h3>Name:{{people.name}}</h3>
<p>Likes:{{people.likes}}</p>
</div>
</div>
</div>
</div>
SCSS
.staffCards{
margin-top:10px;
.staffInfo{
display:none;
position:absolute;
bottom:0px;
height:100%;
width:65%;
border-radius:3%;
background-color:black;
opacity:.6;
color:white;
}
}
jQuery
$('.staffInfo').hover(function(){
$(this).css('display', 'block');
});