Click here to Skip to main content
15,886,137 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

HTML
<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>
CSS
.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;
}
Posted
Updated 22-Aug-21 22:29pm
v2

1 solution

It's down to the width of your panels vs the width of the background image. When the panel is wider than the background image, you can't see the border radius, and the image won't be behind the text.

Either use a wider background image, or set background-size:cover instead.
CSS
.panel {
  background-size: cover;
  ...
background-size - CSS: Cascading Style Sheets | MDN[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900