Свойство переполнения не работает должным образом в колонках начальной загрузки, нужны предложения

Question

Я устанавливаю эффект масштабирования преобразования изображения на картах в начальной загрузке, в разделе «столбцы карт», но эффект виден при масштабировании, а затем подгоняется в соответствии с размером карты. «Переполнение: скрытый» не влияет на это.

Я попытался применить 'display: inline-block'. Изменение родительской карты с «столбцы карты» на «колода карт» выполняет требуемое поведение. Я хотел бы использовать эффект каменной кладки колонн с желаемым эффектом переполнения.

css
.card {
  overflow: hidden;
}

.card .card-img {
  transition: all 0.5s ease;
}

.card:hover .card-img {
  transform: scale(1.2);
}

<div class="container">
  <div class="card-columns">
    <div class="card bg-dark text-white">
      <img class="card-img" src="https://cdn.pixabay.com/photo/2019/03/05/12/26/toque-macaque-4036088_1280.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>
    <div class="card bg-dark text-white">
      <img class="card-img" src="https://cdn.pixabay.com/photo/2019/06/04/21/53/airplane-4252410_1280.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>
  </div>
</div>

Требуемое поведение будет иметь эффект масштаба преобразования без масштабирования видимого изображения и затем подгонки.

Answer 1

При использовании переполнения вы должны проверить height & Width ниже фрагмента.

.card {
  overflow: hidden;
  width:500px;
  height: 500px;
}

.card .card-img {
  transition: all 0.5s ease;
}

.card:hover .card-img {
  transform: scale(1.2);
}

<div class="container">
  <div class="card-columns">
    <div class="card bg-dark text-white">
      <img class="card-img" src="https://cdn.pixabay.com/photo/2019/03/05/12/26/toque-macaque-4036088_1280.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>
    <div class="card bg-dark text-white">
      <img class="card-img" src="https://cdn.pixabay.com/photo/2019/06/04/21/53/airplane-4252410_1280.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>
  </div>
</div>