Scroll too far down on click - html

Question

Website: http://www.asia-hr.com > Home > Team > click on any faces
On my team section, when you click on a face, the bio is popping up. However, I am facing two problems:
1) It's going down very far on click, I would like to be more centered on the picture and bio.
2) I would like to have a slower transition
Do you have any ideas of what can be the issue and how can I fix it?
CSS:
.team-section{
overflow:hidden;
text-align:center;
background: #34495e;
padding: 60px;
}
.team-section h2{
color: white;
}
.ps{
margin-bottom: 40px;
}
.team-section .ps .p{
width: 250px;
height: 250px;
overflow:hidden;
border-radius: 50%;
margin: 0 30px;
display:inline-block;
-webkit-border-radius: 50%;
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
.team-section .ps .p img{
height: 100%;
min-width: 100%;
left: 50%;
position: relative;
transform: translateX(-50%);
filter:grayscale(100%);
transition: 0.5s all;
}
.team-section .ps .p img:hover{
filter: none;
}
.team-section .section{
width:600px;
margin:auto;
font-size: 20px;
color:white;
text-align: justify;
height: 0;
overflow: hidden;
}
.team-section .section:target{
height: auto;
}
.team-section .name{
display:block;
font-size: 22px;
text-align: center;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
HTML
<div class="team-section">
<h2>Our Team</h2>
<span class="border border-1"></span>
<div class="ps">
<div class="p">
<img src="./images/home/h1.jpg">
</div>
<div class="p">
<img src="./images/home/h2.jpg">
</div>
<div class="p">
<img src="./images/home/h3.jpg">
</div>
</div>
<div class="section" id="p1">
<span class="name">Sophia Letana</span>
<span class="border border-1"></span>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
<div class="section" id="p2">
<span class="name">Francois Le Chene</span>
<span class="border border-1"></span>
<p>gh ghgh ghg sit, amet consectetur ghgh elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
<div class="section" id="p3">
<span class="name">Steve Mansoa</span>
<span class="border border-1"></span>
<p>Lghgh ipsum gh sit, amet consectetur adipisicing elit. Placeat tenetur assumenda omnis, rem, quas quae odit, voluptatem dolorum quod corrupti sint doloribus aspernatur? Quasi, dolore?</p>
</div>
</div>