CSS Image Hover Effect? - html

Question

I want my image hovers to look like this,
but For some reason, my CSS styling is not working. You may notice the #content in each of the CSS styling options. That is because I only wanted these styles to apply to a certain section of my website. I looked online and used the W3Schools resource, yet for some reason, it still doesn’t work. My images do not have the hover effect.
#content.container {
position: relative;
width: 50%;
}
#content img {
width: 100%;
height: auto;
border-radius: 50%;
}
#content .column {
float: left;
width: 33.33%;
padding: 5px;
}
#content .row::after {
content: "";
clear: both;
display: table;
}
#content .overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
border-radius: 50%;
}
#content .img:hover .overlay {
bottom: 0;
height: 100%;
opacity: 0.5;
}
#content.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<div class="column">
<div class="team">
<div class="img">
<img src="/static/img/team/team-1.jpg" alt="" style="width: 200px;">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<h3 class="team-prof">
Dr. Pawan Kumar Kesari
</h3>
</div>
</div>
</div>

Answer 1

It seems you haven't followed THIS guide very well.
You also have not identified what #content is.
You need to revise how you target IDs, Classes and Elements in CSS.
Here is your code remodified to follow the guide, plus I added in #content for you.
#content .img {
position: relative;
width: 50%;
}
#content img {
display: block;
width: 200px;
height: auto;
border-radius: 50%;
}
#content .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 200px;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
border-radius: 50%;
}
#content .img:hover .overlay {
opacity: 1;
}
#content .text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div id="content">
<div class="container">
<div class="column">
<div class="team">
<div class="img">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<h3 class="team-prof">
Dr. Pawan Kumar Kesari
</h3>
</div>
</div>
</div>
</div>

Answer 2

There were flaws in your code. There was no shared container. There were no spaces in the css rules between the identifier and the classes. #content .overlay had a height: 0 - this makes the object invisible. My answer isn't perfect, but I've tidied up the code a bit.
.main {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.main_content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 1000px;
}
.main_content_box {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.main_content_box_image {
position: relative;
}
.main_content_box:hover > .main_content_box_image p {
display: flex;
}
.main_content_box:hover > .main_content_box_image img {
filter: brightness(25%);
}
.main_content_box:hover a {
color: #337ab7;
}
.main_content_box_image img {
width: 250px;
height: 250px;
border-radius: 125px; /* or 50%*/
transition: .5s;
}
.main_content_box_image p {
display: none;
position: absolute;
top: 40%;
left: 20%;
right: 0;
font-size: 14px;
color: #fff;
}
.main_content_box a {
color: #333;
font-size: 16px;
font-weight: bold;
text-decoration: none;
margin: 20px 0 0 0;
}
<div class="main">
<div class="main_content">
<div class="main_content_box">
<div class="main_content_box_image">
<img src="https://icdn.lenta.ru/images/2019/11/01/13/20191101130724350/pwa_vertical_1024_f1555b2890fcb39f7ecc85cf65e73fc5.png" alt="">
<p>MBBS, General Physician</p>
</div>
Dr. Pawan Kumar Kesari
</div>
<div class="main_content_box">
<div class="main_content_box_image">
<img src="https://icdn.lenta.ru/images/2019/11/01/13/20191101130724350/pwa_vertical_1024_f1555b2890fcb39f7ecc85cf65e73fc5.png" alt="">
<p>MBBS MD(Medicine) General Physician</p>
</div>
Dr. Nitin Kumar Srivastava
</div>
<div class="main_content_box">
<div class="main_content_box_image">
<img src="https://icdn.lenta.ru/images/2019/11/01/13/20191101130724350/pwa_vertical_1024_f1555b2890fcb39f7ecc85cf65e73fc5.png" alt="">
<p>MBBS General Consultant and Diabetician</p>
</div>
Dr. (Mrs) Halima
</div>
</div>
</div>