CSS溢出：隐藏不起作用

Question

我不知道为什么我的CSS overflow:hidden在我的代码上不起作用。我尝试了很多更改，但是内容（第2段）仍未从页面隐藏。我想要的输出是（请参见屏幕截图），当我单击其中一张图像时，内容将显示在每一幅图像中。

     //style.css
    *{
    	margin: 0;
    	padding: 0;
    	font-family: sans-serif;
    }
    .team-section{
    	overflow: hidden;
    	text-align: center;
    	background: #34495e;
    	padding: 60px;
    }
    .team-section h1{
    	text-transform: uppercase;
    	margin-bottom: 60px;
    	color: white;
    	font-size: 40px;
    }
    .border{
    	display: block;
    	margin: auto;
    	width: 160px;
    	height: 3px;
    	background: #3498db;
    	margin-bottom: 40px;
    }
    .ps{
    	margin-bottom: 40px;
    }
    .ps a{
    	display: inline-block;
    	margin: 0 30px;
    	width: 160px;
    	height: 160px;
    	overflow: hidden;
    	border-radius: 50%;
    }
    .ps a img{
    	width: 100%;
    	filter: grayscale(100%);
    	transition: 0.6s all;
    }
    .ps a:hover >  img{
    	filter: none;
    }
    .secttion{
    	width: 600px;
    	margin: auto;
    	font-size: 20px;
    	color: white;
    	text-align: justify;
    	height: 0;
    	overflow: hidden;
    }
    .section:target{
    	height: auto;
    }
    .name{
    	display: block;
    	margin-bottom: 30px;
    	text-align: center;
    	text-transform: uppercase;
    	font-size: 22px;
    }

<div class="team-section">
    		<h1>Our Team</h1>
    		<span class="border"></span>
    		<div class="ps">
    			<a href="#p1"><img src="img/p1.jpg" alt="Jerome Bobis"></a>
    			<a href="#p2"><img src="img/p2.jpg" alt="John Mark Bondad"></a>
    			<a href="#p3"><img src="img/p3.jpg" alt="Christian Carinan"></a>
    		</div>
    
    		<!--  jerome section  -->
    		<div class="section" id="p1">
    			<span class="name">Jerome Bobis</span>
    			<span class="border"></span>
    			<p>
    				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    			</p>
    		</div>
    		<!--  john mark section -->
    		<div class="section" id="p2">
    			<span class="name">John Mark Bondad</span>
    			<span class="border"></span>
    			<p>
    				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    			</p>
    		</div>
    		<!--   carinan section  -->
    		<div class="section" id="p3">
    			<span class="name">Christian Carinan</span>
    			<span class="border"></span>
    			<p>
    				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    			</p>
    		</div>
    
    		
    	</div>

以下是屏幕截图：

我想要结果：

我的输出：溢出：隐藏不起作用：