Переполнение CSS: скрытый не работает - PullRequest
0 голосов
/ 16 сентября 2018

Я не знаю, почему мой 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>

Вот скриншоты:

Я хотел получить результат:

enter image description here

Мой вывод: переполнение: скрытый не работает:

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...