說明

這是一個輪撥圖的練習！目前布局快完成了 CSS有點小疑問

下面附上html以及CSS提供參考 主要看CSS就可以了 感謝各位

html

   <div class="container">
      <div class="slide">
        <img
          src="https://i.imgur.com/FRRoupS.png"
          alt=""
          referrerpolicy="no-referrer"
        />
        <div class="content">
          <div class="name"></div>
          <div class="des"></div>
          <button>看更多</button>
        </div>
      </div>

      <div class="slide">
        <img
          class="ramen_img"
          src="https://i.imgur.com/kZPA5jO.png"
          alt=""
          referrerpolicy="no-referrer"
        />
        <div class="content">
          <div class="name"></div>
          <div class="des"></div>
          <button>看更多</button>
        </div>
      </div>

      <div class="slide">
        <img
          class="ramen_img"
          src="https://i.imgur.com/KHOTcNO.png"
          alt=""
          referrerpolicy="no-referrer"
        />
        <div class="content">
          <div class="name"></div>
          <div class="des"></div>
          <button>看更多</button>
        </div>
      </div>



// 總共六個吧  我就不貼那麼多了

下面是我嘗試的ＣＳＳ效果

CSS

.slide img {
  width: 200px;
  height: 300px;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 20px;
  box-shadow: 0 30px 45 px #505050;
}

.slide img:nth-child(1),
.slide img:nth-child(2) {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  border-radius: 0;
  box-shadow: none;
  z-index: 5;
}

.slide img:nth-child(3) {
  left: 50%;
  z-index: 10;
}

目標長相

會讓前面的圖變大 然後其他張排一排

問題

我發現我使用nth-child的效果好像錯誤了
並沒有辦法把圖片分開(?

原本的教材是使用background-image 但是因為我要使用imgur空間
需要referrerpolicy="no-referrer"才能讓圖片顯示出來 所以我改用img標籤
但接下來我這邊選取器似乎有錯誤！！？

想請教該怎麼修正CSS的部分才能排版呢？

新手無知，請教諸位前端前輩。
感謝！