Раскрытие карточки товара при наведении?
Пожалуйста, подскажите готовое решение/библиотеку, чтобы по ховеру на карточке в вертсе bootstrap она раскрывалась, как на фото ниже.
Дополнительно:
Tereverda,
Сделал простой код ниже, но тогда увеличивается длина страницы - все съезжает вниз.
Как сделать, чтобы исчезающий блок накладывается как бы на контент и был выше?
Знаете что такое поток в вёрстке?
Как убрать элемент из потока?
Вот это и нужно сделать.
Причём я же Вам сказал что нужно сделать, зачем Вы полезли в display?
Накидал демку:
snippet
- ваш вариант работает, но у вас задана фиксированная высота элемента и за счет этого все работает - как я понял. У меня идет поток карточек товаров в каталоге.
Высота блока может меняться т.к бывают длинные названия товаров на пару строчек.
Поток знаю, но видимо я что-то не догоняю ((
.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>
.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, у Вас пример то есть? Или только дизайн?
- Вадим, сверстал https://ronbel.ru при сжатии страницы, начинает выходить текст, который должен быть скрыт.
- Tereverda, так, и что? Причём тут ваш вопрос?
Делайте адаптивную вёрстку, разбирайтесь почему так происходит (потому что размер картинки меняется) и исправляйте это.
Ответы:
в свое время делал вот так - но у меня это было вызвано проблемой, что было наименование короткое и полное и надо было и то и то частично показать и скрыть всю дополнительную информацию.
В более простом случае можно ограничить по высоте и по ховер снять это ограничение.
snippet
- родными стилями бутстрапа такое вроде бы не реализовать?
- Tereverda, бутстрап не про это потому что.
Делаете обёртку для карточки, которой задаёте overflow: hidden, и делаете саму карточку соответствующего размера.
По наведению убираете overflow с контейнера.
Профит.Хотя у бутстрапа наверное есть хелпер класс про оверфлоу.
- Пожалуйста подскажите в CSS &:hover - там где по ховеру в конце все меняется
& -что означает? - Вадим,
Сделал простой код ниже, но тогда увеличивается длина страницы - все съезжает вниз.
Как сделать, чтобы исчезающий блок накладывается как бы на контент и был выше?
Как показано на скриншоте в вопросе.card-product { overflow: visible; } .card-hidden-description { display: none; } .card-product:hover .card-hidden-description { display: block; }
.card-product { overflow: visible; } .card-hidden-description { display: none; } .card-product:hover .card-hidden-description { display: block; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации раскрытия карточки товара при наведении мы можем использовать CSS и JavaScript. Вот пример кода, который можно использовать для этой задачи:
1. HTML:
```html
Product Name
Product Description
Price: $XX.XX
```
2. CSS:
```css
.product-card {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
.product-info {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
padding: 10px;
display: none;
}
.product-card:hover .product-info {
display: block;
}
```
3. JavaScript (jQuery):
```php
$(document).ready(function() {
$('.product-card').hover(function() {
$(this).find('.product-info').fadeIn();
}, function() {
$(this).find('.product-info').fadeOut();
});
});
```
Этот код создает карточку товара с изображением и информацией о товаре. При наведении курсора на карточку, блок с информацией о товаре будет раскрываться. Когда курсор уводится с карточки, блок с информацией скрывается.
Вы можете настраивать стили и анимации по своему усмотрению, чтобы карточка товара выглядела как вам нужно. Надеюсь, это поможет вам решить вашу проблему с раскрытием карточки товара при наведении на сайте.