Przypadek: Gdy karta jest unosiłona jego szerokość i wysokość powinna wzrosnąć, a inne karty powinny pozostać tak, jak i nazwa miasta powinna być widoczna. W poniższej liście kart ma miasto ukryte ...

1
chaitanya71998 15 marzec 2021, 15:10

1 odpowiedź

Najlepsza odpowiedź

Jeśli nie chcesz, aby wziąć miejsce, prawdopodobnie musiałbyś mieć oddzielny div, który umieściłeś absolutnie na 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>
0
Pete 15 marzec 2021, 12:33