在增加柔性卡的高度时增加其平行柔性卡

Question

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

下面的link卡片列表中的城市最初是隐藏的，该位置只有在卡片悬停时才会显示

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

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

解决此案例的任何见解。

您可以使用模板。

.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

如果您不希望它占用 space，您可能必须有一个单独的 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>

在增加柔性卡的高度时增加其平行柔性卡

On increasing the height of flex card increases its parallel flexcards

css

transition

flexbox

css-transforms

card