When I click each panel, the border-radius CSS doesn't apply and the p element is outside of the active panel.
This is the whole code
https://codepen.io/jujuju12/pen/jOmgLzd[
^]
What I have tried:
<div id="container">
<div class="panel active">
<h3>Sample A</h3>
<p>
Constias quo quibusdam, te veniam cillum an ingeniis. Non noster tamen qui
vidisse, an duis duis e singulis, qui illum familiaritatem, quorum
instituendarum voluptate amet incididunt. Malis do eu sunt constias, cupidatat
velit mandaremus.
</p>
</div>
<div class="panel">
<h3>Sample B</h3>
<p>
Constias quo quibusdam, te veniam cillum an ingeniis. Non noster tamen qui
vidisse, an duis duis e singulis, qui illum familiaritatem, quorum
instituendarum voluptate amet incididunt. Malis do eu sunt constias, cupidatat
velit mandaremus. Aliqua eiusmod quo quem dolore.Incurreret si summis quamquam.
</p>
</div>
<div class="panel">
<h3>Sample C</h3>
<p>
Constias quo quibusdam, te veniam cillum an ingeniis. Non noster tamen qui
vidisse, an duis duis e singulis, qui illum familiaritatem, quorum
instituendarum voluptate amet incididunt. Malis do eu sunt constias, cupidatat
velit mandaremus. Aliqua eiusmod quo quem dolore.Incurreret si summis quamquam.
</p>
</div>
<div class="panel">
<h3>Sample D</h3>
<p>
Constias quo quibusdam, te veniam cillum an ingeniis. Non noster tamen qui
vidisse, an duis duis e singulis, qui illum familiaritatem, quorum
instituendarum voluptate amet incididunt. Malis do eu sunt constias, cupidatat
velit mandaremus. Aliqua eiusmod quo quem dolore.Incurreret si summis quamquam.
Aliqua appellat possumus, quem fidelissimae cernantur legam singulis si aut
</p>
</div>
<div class="panel">
<h3>Sample E</h3>
<p>
Constias quo quibusdam, te veniam cillum an ingeniis. Non noster tamen qui
vidisse, an duis duis e singulis, qui illum familiaritatem, quorum
instituendarum voluptate amet incididunt. Malis do eu sunt constias, cupidatat
velit mandaremus. Aliqua eiusmod quo quem dolore.Incurreret si summis quamquam.
Aliqua appellat possumus, quem fidelissimae cernantur legam singulis si aut
</p>
</div>
</div>
.panel {
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: blanchedalmond;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
}
.panel h3{
font-size: 24px;
position: absolute;
top: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel p{
font-size: 15px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}
.panel.active p{
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}