two class CSS not picking up both classes-CodePudding

Hi I'm following a tutorial. As far as I can see I have written exactly the same thing in my code but it is behaving differently.

.container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  transition: flex 0.7s ease-in;
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
}

<body>
  <div >
    <div  style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
      <h3>Beautiful Sky</h3>
    </div>
    <div  style="background-image: url('./juskteez-vu-TIrXot28Znc-unsplash.jpg')">
      <h3>Incredible sky</h3>
    </div>
    <div  style="background-image: url('./casey-horner-fsJB3KT2rj8-unsplash.jpg')">
      <h3>Northern Lights</h3>
    </div>
    <div  style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
      <h3>Northern Lights</h3>
    </div>
    <div  style="background-image: url('./vincent-guth-uhoILl3HUZM-unsplash.jpg')">
      <h3>Beautiful Sky</h3>
    </div>
  </div>
  </div>
</body>

but on the screen the panel that's active loses all the css from the panel class instead of using both. Any ideas why this might be? Thanks!

CodePudding user response：

Try to change value of background-size property to cover (background-size: cover). I think this is what you need

CodePudding user response：

Actually it works but the problem is you are using 100% size of your images so its looks like this:

I added border to demonstrate

.container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  transition: flex 0.7s ease-in;
  border: red 2px solid;
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
}

<body>
  <div >
    <div  style="background-image: url('https://picsum.photos/id/266/200/300')">
      <h3>Beautiful Sky</h3>
    </div>
    <div  style="background-image: url('https://picsum.photos/id/230/200/300')">
      <h3>Incredible sky</h3>
    </div>
    <div  style="background-image: url('https://picsum.photos/id/217/200/300')">
      <h3>Northern Lights</h3>
    </div>
    <div  style="background-image: url('https://picsum.photos/id/227/200/300')">
      <h3>Northern Lights</h3>
    </div>
    <div  style="background-image: url('https://picsum.photos/id/137/200/300')">
      <h3>Beautiful Sky</h3>
    </div>
  </div>
</body>

The solution is using background-size: cover; instead

.container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  transition: flex 0.7s ease-in;
  border: red 2px solid;
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
}

<body>
  <div >
    <div  style="background-image: url('https://picsum.photos/id/266/200/300')">
      <h3>Beautiful Sky</h3>
    </div>
    <div  style="background-image: url('https://picsum.photos/id/230/200/300')">
      <h3>Incredible sky</h3>
    </div>
    <div  style="background-image: url('https://picsum.photos/id/217/200/300')">
      <h3>Northern Lights</h3>
    </div>
    <div  style="background-image: url('https://picsum.photos/id/227/200/300')">
      <h3>Northern Lights</h3>
    </div>
    <div  style="background-image: url('https://picsum.photos/id/137/200/300')">
      <h3>Beautiful Sky</h3>
    </div>
  </div>
</body>

CodePudding user response：

I ran your code in codepen. I only changed the background-images to colors since the were loaded locally. It is behaving as it should, the panel active div displaying everything defined in the panel class aswell. What are you missing?

https://codepen.io/wischn/pen/OJwOQxp

.container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  transition: flex 0.7s ease-in;
}

.panel h3 {
  font-size: 24px;
 position: absolute; 
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}

.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
}