Bootstrap card animation when hover - php

Question

I have view where I show dynamically some cards that grow when hover. This is my css:
.card-deck .card {
height:200px;
width: 200px;
transition: transform .1s;
}
.card-deck .card:hover {
-ms-transform: scale(1.25); /* IE 9 */
-webkit-transform: scale(1.25); /* Safari 3-8 */
transform: scale(1.25);
}
#media (min-width: 576px) {
.card-deck .card {
flex-basis: calc(50% - 30px);
/* #{$grid-gutter-width} */
}
}
#media (min-width: 768px) {
.card-deck .card {
flex-basis: calc(33.33% - 30px);
}
}
#media (min-width: 992px) {
.card-deck .card {
flex-basis: calc(25% - 30px);
}
}
.card-img-top {
width: 100%;
height: 75%;
object-fit: cover;
}
.card-title {
width: 100%;
height: 100%;
object-fit: cover;
}
And my home.blade.php:
<div class="container">
<div class="row">
<div class="col">
<div class="card-deck">
#forelse ($meetings as $meeting)
#csrf
<div class="card mb-3 bg-dark">
#if ($meeting['photoName'])
<img class="card-img-top" src="{{ url($meeting['photoName']) }}" alt="Foto de la asignatura">
#else
<img class="card-img-top" src="https://www.arqhys.com/general/wp-content/uploads/2011/07/Roles-de-la-inform%C3%A1tica.jpg" alt="Foto de la asignatura">
#endif
<div class="card-body bg-dark">
{{ $meeting->title }}
</div>
</div>
#empty
<h4> Nothing to show yet.</h4>
#endforelse
</div>
</div>
</div>
</div>
I have 2 problems here that I can't solve:
1- When a card grows, it's over those that are in the previous row but under the card below that, so part of the card is hidden, how can I fix that?
2- The rows are made up of 4 cards but if the number of cards is not multiple of 4, I want the last row incomplete, not full filled by 1, 2 or 3 bigger cards. How can I do that?

Answer 1

.card-deck has been dropped
Breaking Dropped .card-deck in favor of our grid. Wrap your cards in column classes and add a parent .row-cols-* container to recreate card decks (but with more control over responsive alignment).
-- https://getbootstrap.com/docs/5.2/migration/#card
<div class="container">
<div class="row">
<div class="col">
<div class="row row-cols-4 g-2">
#forelse ($meetings as $meeting)
#csrf
<div class="col">
<div class="card mb-3 bg-dark h-100">
Here is a working snippet with the 5th card wrapped:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="row row-cols-4 g-2">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

Answer 2

<style>
.card{
border: 2px solid black;
}
</style>```