• 你可以使用css属性writing-mode .来改变文本的方向。
• 请看下面的css，在crard没有悬停的地方，我们保持文本为writing-mode: vertical-lr;，垂直模式，当卡悬停时，我们可以使用writing-mode: vertical-lr;，水平模式。
• Beloew是css版本，你可以很容易地将其转换为scss。
• 我也纠正了一些缺失的CSS。

.expanding-cards h3 {
  position: absolute;
  top: 15px;
  left: 15px;
  transition: all 0.15s ease-out;
  writing-mode: vertical-lr;
}

.expanding-cards .expandcard:hover h3 {
  writing-mode: horizontal-tb;
}

x一个一个一个一个x一个一个二个x

我只需要添加文本和调整z索引。我想下面是你想要的结果

.expanding-cards {
  display: flex;
  width: 100%;
  height: 35vh;
  align-items: stretch;
  flex-direction: row;
  gap: 1rem;
}

.expanding-cards h3 {
  display: inline-block;
  flex-direction: column;
  z-index: 3000;
}

.expanding-cards>* {
  width: 0;
  position: relative;
  flex: 1;
  transition: all 0.15s ease-out;
}

.expanding-cards>*.expanded:hover {
  flex: 3;
}

.expanding-cards>*.expanded:hover h3 {
  display: block;
  z-index: 3001;
  flex-direction: row;
}

.expanding-cards>*.expanded h3 {
  display: none;
  z-index: 3001;
  flex-direction: row;
}

.expanding-cards>* img {
  position: absolute;
  inset: 0;
z-index:-1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="row">
  <div class="expanding-cards">
    <div class="expandcard expanded">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Canada</h3>
    </div>
    <div class="expandcard expanded">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Canada</h3>
    </div>
    <div class="expandcard expanded">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Canada</h3>
    </div>
    <div class="expandcard expanded">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Canada</h3>
    </div>
    <div class="expandcard expanded">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Canada</h3>
    </div>
  </div>

</div>