Hey there! I'm currently working on creating a hover effect for my cards using Bootstrap and z-index. However, I've run into an issue where the z-index works fine when I hover over the cards, but the row loses its height. I tried adding a height to the row, which fixed the issue, but then it lost its responsiveness. This created a problem when viewing the cards on different resolutions where there was excessive space. I really need the hover effect to be responsive across different resolutions and I want to maintain the position: absolute; property to ensure the z-index only raises the cards and not push them. Thank you so much for taking the time to read this, and I'm hopeful that you can provide some guidance.
Here is an example of my current setup
I attempted to add a height to the row, but it negatively impacted the responsiveness of the layout.
.row{
height:300px;
}
.row {
width: 100%;
}
.card {
transition: 1s;
}
.card:hover {
position: absolute !important;
top: 0px;
width: 130%;
z-index: 1;
transition(all .2s ease-out);
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde3fde2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279677966">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<div>
<div class="row bg-danger">
<div class="mt-2 col-lg-4 col-md-6 col-12">
<div class="card m-3" style="width: 18rem; height:20rem;">
<div class="card-body">
<h1 class="card-text">card 1</h1>
</div>
</div>
</div>
</div>
<div class="row bg-warning">
<div class="mt-2 col-lg-4 col-md-6 col-12">
<div class="card m-3 " style="width: 18rem; height:20rem;">
<div class="card-body">
<h1 class="card-text">Card 2</h1>
</div>
</div>
</div>
</div>