Как частично скрыть содержимое карточки?

Question

[Tereverda]

У карточки есть два состояния, видна основная часть и идет открытие по ховеру.
Контент в основной части динамический, название товаров бывают длинные, сейчас все работает с фиксированной высотой дива, как сделать так, чтобы видимая часть задавалась динамически и адаптивно отображалась?

<div class="card card-product rounded-3">
    <div class="card-body card-hidden-description p-3">
      <div class="card-fixed-description">
          <!-- Изображение -->
          
          <!-- Название товара -->
          <div class="product-title mt-1"></div>

          <!-- Свойства -->
        </div>
    </div>
</div>

/**** Карточка товара в каталоге ****/
.card-product {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 19rem;
}

@media (max-width: 768px) {
  .card-product {
    max-height: 17rem;
  }
}

.card-product:hover {
  overflow: initial;
  z-index: 2;
}

.card-hidden-description {
  padding: 4px;
  background-color: #fff;
  border-radius: 4px;
}

.card-product:hover .card-hidden-description{
  box-shadow: 0 0 10px 1px gray;
}

Comments

[Tereverda]

Justa Gain, что означает тег спам?

[Tereverda]

Justa Gain, все теги поста по теме

[Ankhena]

Как частично скрыть содержимое карточки?

Ну например, через display: none тому содержимому, которое нужно скрыть.
Не подходит? Чем не подходит? Что ещё пробовали?

[Tereverda]

Ankhena, Если делать через дисплей верстка дёргается, нужно, чтобы смещения не было по этому оверфлоу.

[Ankhena]

Tereverda, придется выяснить почему дергается и исправить. Заниматься угадыванием не имеет смысла. Делайте песочницу на codepen.io с видимой проблемой.
Либо считайте нужную высоту на js.

Answer 1

[Илья]

.card-product {
  display: none;
}

или

.card-product {
  visibility: hidden;
}