Bootstrap card image hovering over carousel

Question

I have a carousel on top of my webpage and some cards with text and images under the carousel. The thing is that I want to magnify the cards when I hover with the mouse but the cards go under the carousel instead of on top of it. I don't know if what I am trying to describe makes sense but I can't seem to describe it better and I need some help please to figure it out, since I am new and still learning html css and javascript. Thanks in advance for your time.

Below is the code that I am trying to use:

.nav-item:hover {
  background: darkgrey;
}

.dropdown-item:hover {
  background: darkgrey;
}

.carousel-inner img {
  height: 500px;
}

.cardsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.card:hover {
  transform: scale(2);
  transition: 5s ease-in-out;
}

.card {
  margin: 1em;
}

`

<div id="carouselExample" class="carousel carousel-dark slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="5000">
      <img src="https://placehold.co/600x400?text=Slide-1" class="d-block w-100" alt="Pidgeot">
    </div>
    <div class="carousel-item" data-bs-interval="5000">
      <img src="https://placehold.co/600x400?text=Slide-2" class="d-block w-100" alt="Sceptile">
    </div>
    <div class="carousel-item" data-bs-interval="5000">
      <img src="https://placehold.co/600x400?text=Slide-3" class="d-block w-100" alt="Charizard">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
            </button>
</div>
<div class="cardsContainer">
  <div class="card" style="width: 18rem;">
    <img src="https://placehold.co/600x400/blue/white?text=Slide-1" class="card-img-top" alt="Gyarados card">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <div class="card" style="width: 18rem;">
    <img src="https://placehold.co/600x400/orange/white?text=Slide-2" class="card-img-top" alt="Altaria card">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <div class="card" style="width: 18rem;">
    <img src="https://placehold.co/600x400/green/white?text=Slide-3" class="card-img-top" alt="Lucario card">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
  <div class="card" style="width: 18rem;">
    <img src="https://placehold.co/600x400/purple/white?text=Slide-4" class="card-img-top" alt="Suicune card">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

Answer 1

I can't reproduce your issue exactly, but try adding a z-index property to this css class:

.card:hover {
    transform: scale(2);
    transition: 5s ease-in-out;
    z-index: 9999 !important;
}