如何修复卡片Hover动画：仅当前卡片放大异常问题

问题 #

我想要实现的卡片动画效果是：鼠标悬停在某张卡片上时，只有这张卡片会放大。但现在出现了异常——悬停任意一张卡片时，所有卡片都会一起放大，这不符合预期。我尝试给每张卡片设置不同的动画类名，但问题并未解决。相关代码如下：

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;
}

解决方案 #

问题根源在于你没给.card本身加缩放变换，而是修改了.card .img的宽度——因为容器用了justify-content: space-between，某张卡片的图片变宽后会挤压其他卡片的布局，看起来像是所有卡片都在放大。

要实现仅悬停卡片单独放大，直接给.card添加transform: scale()即可，配合以下调整：

修改后的关键 CSS 代码 #

.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;
  transform-origin: center; /* 以卡片中心为缩放原点 */
}

.card:hover {
  background-image: linear-gradient(#080434, #080434);
  transform: scale(1.05); /* 悬停时放大1.05倍，可自行调整 */
  z-index: 10; /* 提升层级，避免被其他卡片遮挡 */
}

/* 把图片的宽度修改换成缩放，避免挤压布局 */
.card:hover .img {
  /* width: 110%; */
  transform: scale(1.1);
  opacity: 1;
}

说明 #

1. transform: scale(1.05)直接作用于悬停的.card元素，只会影响当前卡片，不会干扰其他卡片布局
2. transform-origin: center确保卡片从中心开始缩放，视觉效果更自然
3. z-index: 10让悬停的卡片显示在最上层，避免被周围卡片遮挡
4. 将图片的width: 110%改为transform: scale(1.1)，既保留图片放大效果，又不会破坏布局

这样修改后，鼠标悬停某张卡片时，只有该卡片会放大，完全符合预期。

内容的提问来源于stack exchange，提问作者João Felipe Rocha