我如何修复这个动画?

Question

这个卡片动画的目标是当你将鼠标悬停在它们上面时，它们会变大。但现在，当你将鼠标悬停在一张牌上时，其他牌也会变大，这不是我想要的。我需要弄清楚如何使你实际悬停在上面的卡片变大，而其他卡片保持不变。

HTML:
<div class="card-container" style="margin-top: -25rem; gap: auto">
<div class="card  col-lg-2 col-md-6 col-sm-12 col-12">
<div class="img">
<img src="img/logoalpinestars.png" alt="logo alpinestars" style="transform: scale(0.2);">
</div>
<div class="content">
<span class="desc text-white">A Alpinestars, criada em
1963, é a marca líder
mundial em tecnologia de
proteção paira prática de
esportes à motor. A
empresa acredita que o
melhor design é fruto do
aprendizado obtido sob
condições extremas.</span>
</div>
<div class="arrow">
<span>&#8673;</span>
</div>
</div>
<div class="card  col-lg-2 col-md-6 col-sm-12 col-12">
<div class="img">
<img src="img/logoasw.png" alt="logo alpinestars" style="transform: scale(0.3);">
</div>
<div class="content">
<span class="desc text-white">A Alpinestars, criada em
1963, é a marca líder
mundial em tecnologia de
proteção paira prática de
esportes à motor. A
empresa acredita que o
melhor design é fruto do
aprendizado obtido sob
condições extremas.</span>
</div>
<div class="arrow">
<span>&#8673;</span>
</div>
</div>
<div class="card col-lg-2 col-md-6 col-sm-12 col-12">
<div class="img">
<img src="img/logobell.png" alt="logo alpinestars" style="transform: scale(0.06);">
</div>
<div class="content">
<span class="desc text-white">A Alpinestars, criada em
1963, é a marca líder
mundial em tecnologia de
proteção paira prática de
esportes à motor. A
empresa acredita que o
melhor design é fruto do
aprendizado obtido sob
condições extremas.</span>
</div>
<div class="arrow">
<span>&#8673;</span>
</div>
</div>
<div class="card col-lg-2 col-md-6 col-sm-12 col-12">
<div class="img">
<img src="img/leattlogo.png" alt="logo alpinestars" style="transform: scale(0.2);">
</div>
<div class="content">
<span class="desc text-white">A Alpinestars, criada em
1963, é a marca líder
mundial em tecnologia de
proteção paira prática de
esportes à motor. A
empresa acredita que o
melhor design é fruto do
aprendizado obtido sob
condições extremas.</span>
</div>
<div class="arrow">
<span>&#8673;</span>
</div>
</div>
</div>

css:
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.card {
border-radius: 16px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
cursor: pointer;
width: calc(25% - 20px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background-image: linear-gradient(#b8b4b4, #b8b4b4);
transition: all 0.5s;
margin-bottom: 20px;
}
.card:hover {
background-image: linear-gradient(#080434, #080434);
}
.card .img {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-size: cover;
background-position: center;
transition: all 0.5s;
z-index: 2;
position: relative;
opacity: 0.8;
}
.card .img span {
text-transform: uppercase;
font-size: 24px;
font-weight: 100;
font-style: italic;
transition: all 0.5s;
}
.card:hover .img {
width: 110%;
opacity: 1;
}
.card:hover .img span {
font-size: 28px;
}
.card .content {
padding: 0px 20px;
height: 0;
opacity: 0;
transition: all 0.5s;
position: relative;
box-sizing: border-box;
overflow: hidden;
transform: translateY(30px);
}
.card:hover .content {
height: 260px;
padding: 20px;
opacity: 1;
transform: translateY(0);
}
.card .content p {
margin: 0;
}
.card .content .title {
font-size: 20px;
font-weight: 600;
}
.card .content .desc {
font-size: 14px;
font-weight: 100;
opacity: 0.8;
margin-top: 8px;
}
.card .arrow {
padding: 15px;
transform: rotate(-180deg);
transition: all 0.5s;
}
.card:hover .arrow {
transform: rotate(0);
}
.card .arrow span {
font-size: 24px;
}

我已经尝试为每个卡片创建不同的类来动画，但它没有工作

Answer 1

在card:hover上添加transform:scale(1.1);