Раскрытие карточки товара при наведении?

Question

[Tereverda]

Пожалуйста, подскажите готовое решение/библиотеку, чтобы по ховеру на карточке в вертсе bootstrap она раскрывалась, как на фото ниже.

Answer 1

[Вадим]

Tereverda,

Сделал простой код ниже, но тогда увеличивается длина страницы - все съезжает вниз.
Как сделать, чтобы исчезающий блок накладывается как бы на контент и был выше?

Знаете что такое поток в вёрстке?
Как убрать элемент из потока?
Вот это и нужно сделать.

Причём я же Вам сказал что нужно сделать, зачем Вы полезли в display?
Накидал демку:

Comments

[Tereverda]

ваш вариант работает, но у вас задана фиксированная высота элемента и за счет этого все работает - как я понял. У меня идет поток карточек товаров в каталоге.

Высота блока может меняться т.к бывают длинные названия товаров на пару строчек.

Поток знаю, но видимо я что-то не догоняю ((

.card-product {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.card-hidden-description {
  display: none;
}

.card-product:hover .card-hidden-description {
  display: flex;
  overflow: initial;
  z-index: 2;
}


<div class="card-product">
Текст который есть всегда
бывает, что две строчки

<ul class="card-hidden-description">
<li>Текст который исчезает</li>
</ul>
</div>

[Вадим]

Tereverda, Прочитайте код внимательно. У меня НЕ задана фиксированная высота элементам. У меня задана максимальная допустимая высота. То есть некоторый ограничитель. Что мешает Вам так сделать, подобрав ограничитель под необходимое значение заголовка на нужное кол-во строк?

Высота блока может меняться т.к бывают длинные названия товаров на пару строчек.

Окей а с соседними блоками что тогда? Будет пустое пространство или их высота должна подстроиться под самый большой в строке?

[Вадим]

Tereverda, у Вас пример то есть? Или только дизайн?

[Tereverda]

Вадим, сверстал https://ronbel.ru при сжатии страницы, начинает выходить текст, который должен быть скрыт.

[Вадим]

Tereverda, так, и что? Причём тут ваш вопрос?
Делайте адаптивную вёрстку, разбирайтесь почему так происходит (потому что размер картинки меняется) и исправляйте это.

Answer 2

[lagudal]

в свое время делал вот так - но у меня это было вызвано проблемой, что было наименование короткое и полное и надо было и то и то частично показать и скрыть всю дополнительную информацию.
В более простом случае можно ограничить по высоте и по ховер снять это ограничение.

Comments

[Tereverda]

родными стилями бутстрапа такое вроде бы не реализовать?

[Вадим]

Tereverda, бутстрап не про это потому что.
Делаете обёртку для карточки, которой задаёте overflow: hidden, и делаете саму карточку соответствующего размера.
По наведению убираете overflow с контейнера.
Профит.

Хотя у бутстрапа наверное есть хелпер класс про оверфлоу.

[Tereverda]

Пожалуйста подскажите в CSS &:hover - там где по ховеру в конце все меняется
& -что означает?

[Tereverda]

Вадим,
Сделал простой код ниже, но тогда увеличивается длина страницы - все съезжает вниз.
Как сделать, чтобы исчезающий блок накладывается как бы на контент и был выше?
Как показано на скриншоте в вопросе

.card-product {
  overflow: visible;
}

.card-hidden-description {
  display: none;
}

.card-product:hover .card-hidden-description {
  display: block;
}