Я не знаю, почему мой 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>
Вот скриншоты:
Я хотел получить результат:
Мой вывод: переполнение: скрытый не работает: