Карта оказывается позади другой карты, когда я уменьшаю размер экрана

Question

Я пытаюсь создать набор адаптивных карт, используя bootstrap. Код карт выглядит следующим образом:

                         <div class="col-xl-4 col-md-6 col-sm-6 p-2">
                            <div class="card shadow" style="width: 16rem;">
                                <div class="inner">
                                    <img class="card-img-top" src="images/1.jpeg" alt="Card image cap">
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title">Location 1</h5>
                                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                                        Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
                                    </p>
                                    <div class="justify-content-between">
                                        <!-- <a href="#" class="btn btn-primary">Learn more</a> -->
                                        <div class="ml-2">
                                            <i class="fas fa-video fa-lg"></i>
                                            <i class="fas fa-restroom fa-lg ml-2"></i>
                                            <span class="ml-5">
                                                <i class="fas fa-bolt text-warning fa-lg">10</i>
                                                <i class="fas fa-bolt text-success fa-lg ml-2">8</i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

Дополнительные css применяются к этому:

.inner {
        overflow:hidden;
    }

    .inner img {
        transition: all 1.5s ease;
    }
    .inner img:hover{
        transform:scale(1.5);
    }
    .card-img-top {
        width: 100%;
        height: 25vh;
        object-fit: cover;
    }

То, что я пытаюсь достичь, это когда бы ни находился над изображением внутри карта, она будет увеличиваться. Это работает нормально, но всякий раз, когда я go уменьшаю размер окна, одна карта опускается ниже другой.

Я не могу понять, почему это происходит.

Answer 1

Карта перекрывает другую карту. поэтому примените z-idex: 1000. это работает.

  .card{
        z-index: 1000;
    }
    .inner {
        overflow: hidden;
    }

    .inner img {
        transition: all 1.5s ease;
    }

    .inner img:hover {
        transform: scale(1.5);
    }

    .card-img-top {
        width: 100%;
        height: 25vh;
        object-fit: cover;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>


<div class="row">
<div class="col-xl-4 col-md-4 col-sm-6 p-2">
    <div class="card shadow" style="width: 16rem;">
        <div class="inner">
            <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQ6mhz8QnD2r1COMuWG4RZnrAzrgFwQHvC7QbIC3cSL6pbYUpL&usqp=CAU" alt="Card image cap">
        </div>
        <div class="card-body">
            <h5 class="card-title">Location 1</h5>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
            </p>
            <div class="justify-content-between">
                <!-- <a href="#" class="btn btn-primary">Learn more</a> -->
                <div class="ml-2">
                    <i class="fas fa-video fa-lg"></i>
                    <i class="fas fa-restroom fa-lg ml-2"></i>
                    <span class="ml-5">
                        <i class="fas fa-bolt text-warning fa-lg">10</i>
                        <i class="fas fa-bolt text-success fa-lg ml-2">8</i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-4 col-md-4 col-sm-6 p-2">
    <div class="card shadow" style="width: 16rem;">
        <div class="inner">
            <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQ6mhz8QnD2r1COMuWG4RZnrAzrgFwQHvC7QbIC3cSL6pbYUpL&usqp=CAU" alt="Card image cap">
        </div>
        <div class="card-body">
            <h5 class="card-title">Location 1</h5>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
            </p>
            <div class="justify-content-between">
                <!-- <a href="#" class="btn btn-primary">Learn more</a> -->
                <div class="ml-2">
                    <i class="fas fa-video fa-lg"></i>
                    <i class="fas fa-restroom fa-lg ml-2"></i>
                    <span class="ml-5">
                        <i class="fas fa-bolt text-warning fa-lg">10</i>
                        <i class="fas fa-bolt text-success fa-lg ml-2">8</i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>


</div>