When setting a transform scale effect on images in cards within the 'card-columns' of Bootstrap, I noticed that the effect is visible during scaling and then adjusts to fit the card size. The use of 'overflow: hidden' does not seem to have any impact on this issue.
I attempted using 'display:inline-block' as well but found that changing the parent card from 'card-columns' to 'card-deck' achieved the desired behavior. I am hoping to combine the masonry effect of card-columns with the desired overflow effect.
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>The goal is to achieve the transform scale effect without the image visibly scaling and then fitting to the container.