增加弹性卡的高度会增加其平行弹性卡

Question

用例：当卡片悬停时，它的宽度和高度应该增加，其他卡片应该保持原样，城市名称应该可见。

在下面的链接中，卡片列表中的城市最初是隐藏的，只有在卡片悬停时才能看到该位置

当卡片悬停时，城市变得可见并且卡片高度增加。

但是其他卡片的高度也随着这张卡片的增加而增加，这扭曲了布局。它们的高度不应增加。

解决此案的任何见解。

你可以使用模板。

.card-collection {
  display: flex;
  flex-wrap: wrap;
  margin: 30px
}

.card {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}

.card:hover {
  transform: scale(2);
  position: initial;
  z-index: 111;
  background: #fff;
}

.card p {
  display: none;
}

.card:hover p {
  display: block;
}

<div class="card-collection">

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <p>Chennai</p>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <p>Chennai</p>
    </div>
  </div>


</div>

``

Answer 1

如果您不希望它占用空间，您可能必须有一个单独的 div，在悬停时绝对定位：

.card-collection {
  display: flex;
  flex-wrap: wrap;
  margin: 30px
}

.card {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  position: relative;
}

.hover {
  display: none;
}

.card:hover .hover {
  display: block;
  transform: scale(2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
  border: 1px solid red;
}

<div class="card-collection">

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <div class="hover">
        <h5 class="text-center"> Aravind </h5>
        <p>Chennai</p>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Ravi </h5>
      <div class="hover">
        <h5 class="text-center"> Ravi </h5>
        <p>Chennai</p>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <div class="hover">
        <h5 class="text-center"> Aravind </h5>
        <p>Chennai</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="text-center"> Aravind </h5>
      <div class="hover">
        <h5 class="text-center"> Aravind </h5>
        <p>Chennai</p>
      </div>
    </div>
  </div>

</div>