On increasing the height of flex card increases its parallel flexcards

Question

Use case : when card is hovered its width and height should get increased and other cards should remain as it is and the city name should be visible.

in the link below list of cards have city hidden initially, the location will only visible when card is hovered

when card is hovered the city is getting visible and cards height is getting increased.

But other cards height is also getting increased with this card, which is distorting the layout. Their height should not get increased.

Any insights to solve this case.

You can use template.

.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

If you don't want it to take space, you would probably have to have a separate div that you positioned absolute on hover:

.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>