Can anyone help me with setting display:block; on all the p tags and the overlay div when I hover over my img tag? Is this achievable with just CSS or do I need to incorporate some JavaScript? Open to suggestions on the best approach. Any assistance would be greatly appreciated. Thanks.
.staff-pic-contain {
height: 250px;
width: 250px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.staff-pic {
height: 100%;
width: 100%;
border-radius: 50%;
}
p {
font-weight: bold;
position: absolute;
color: white;
display: none;
}
.name {
margin-top: 15%;
}
.number {
margin-top: 25%;
}
.overlay {
background-color: red;
height: 100%;
width: 100%;
border-radius: 50%;
position: absolute;
top: 0;
opacity: 0.75;
display: none;
}
img:hover {
cursor: pointer;
}<div class="staff-pic-contain">
<img class="staff-pic" src="https://picsum.photos/g/200/300" alt="">
<p class="position"> CEO </p>
<p class="name"> NAME </p>
<p class="number"> 123123 </p>
<div class="overlay"></div>
</div>