I'm currently working with bootstrap cards and have added hover effects to them. However, I'm facing an issue where on larger devices, hovering over one card enlarges all the other cards as well. This problem doesn't occur on smaller devices. My desired outcome is that only the card being hovered over should enlarge, while the rest remain the same size. Feel free to try the snippet below in full screen mode to see the issue for yourself.
.card{
cursor: pointer;
transition: all 0.5s ease-out;
}
.content{
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
.content .copy{
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
.card-footer{
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
border:none !important;
}
.card-header{
display: block;
border:none !important;
padding-top: 20px;
padding-bottom: 20px;
transition: all 0.5s ease-out;
transition: border 0.15s ease-out;
overflow: hidden;
}
/* adding hover */
.card:hover{
box-shadow: 0px 0px 10px 0px rgb(86 82 90 / 35%) !important;
}
.card:hover .content{
max-height: 500px;
transition: max-height 0.25s ease-in;
}
.card:hover .copy{
max-height: 500px;
transition: max-height 0.25s ease-in;
}
.card:hover .card-footer{
max-height: 500px;
transition: max-height 0.25s ease-in;
border-top: 1px solid #d7dae3;
}
.card:hover .card-header{
display: block;
border-bottom: 1px solid #d7dae3;
transition: border 0.25s ease-in;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0eef0ef">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xl-4">
<div class="card shadow-sm p-4">
<div class="card-header p-0 text-center">
<h2 class="title">Card 1</h2>
</div>
<div class="content text-break p-2">
<p class="copy">card-1 description</p>
</div>
<div class="card-footer text-left p-0">
<button class="btn btn-primary m-3">View</button>
</div>
</div>
</div>
<!-- end cards -->
<div class="col-xl-4">
<div class="card shadow-sm p-4">
<div class="card-header p-0 text-center">
<h2 class="title">Card 1</h2>
</div>
<div class="content text-break p-2">
<p class="copy">card-1 description</p>
</div>
<div class="card-footer text-left p-0">
<button class="btn btn-primary m-3">View</button>
</div>
</div>
</div>
<!-- end cards -->
<div class="col-xl-4">
<div class="card shadow-sm p-4">
<div class="card-header p-0 text-center">
<h2 class="title">Card 1</h2>
</div>
<div class="content text-break p-2">
<p class="copy">card-1 description</p>
</div>
<div class="card-footer text-left p-0">
<button class="btn btn-primary m-3">View</button>
</div>
</div>
</div>
<!-- end cards -->
</div>
</div>