Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap card image hovering over carousel

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">
Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    you are using scale(2) so that it turns too big. to be on other elements,

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

    z-index somehow selects element should be in which layer.e.g. z-index:1 brings one element to layer one while others are in layer 0

    These are just my recommendations !

    to myself I would rather not set transition duration to 5s, If you listen to me try 500ms and instead of scale(2) try scale(1.15)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search