扩展卡

Question

@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

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

.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: whitesmoke;
  cursor: pointer;
  flex: 0.5;
  margin: 5px;
  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;
}

@media(max-width: 480px) {
  .container {
    width: 100vw;
  }
  .panel:nth-of-type(2),
  .panel:nth-of-type(3) {
    display: none;
  }
}

<div class="container">
  <div class="panel active" style="background-image: url('https://1.bp.blogspot.com/-V-wzl1n3iWU/YKjIAPTWPTI/AAAAAAAABOA/-Vkpy3wfmAIaDNs8KMp-GP0l3eo2D4eigCLcBGAsYHQ/s1604/IMG_20210522_140407.jpg');">
    <h3>Fell The Ocen</h3>
  </div>

  <div class="panel" style="background-image: url('https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-eiffel-tower.jpg');">
    <h3>Explore World</h3>
  </div>

  <div class="panel" style="background-image: url('https://i.pinimg.com/736x/be/33/76/be3376b0f835a1766cb7a95003ea4a7d.jpg');">
    <h3>See the Colors</h3>
  </div>

  <div class="panel" style="background-image: url('https://img.freepik.com/free-photo/beautiful-view-greenery-bridge-forest-perfect-background_181624-17827.jpg');">
    <h3>Winter Magic</h3>
  </div>
  <div class="panel" style="background-image: url('https://wallpapers.com/images/hd/awesome-earth-covered-by-clouds-zfnqsjjwh6r6ymku.jpg');">
    <h3>Something New</h3>
  </div>
</div>

我正在学习 javascript，我正在从 travasti media 做 50 个项目，但我遇到了问题，课程是扩展卡片（第一课，我被困住了，我知道我很烂顺便说一句）我把代码和视频一样，但它没有隐藏最后两张图片就像在视频中一样，它只会缩小然后一起缩小，我仍然可以看到 5 张卡，除了 4 我不知道如何解决这个问题我研究了视频中的代码，一切都和我的一样，但它仍然有效，所以任何帮助将得到帮助

抱歉英语不好

Answer 1

这是视频里的样子