Bootstrap сетка с появляющимся блоком без сдвига

[funman]

Помогите разобраться с версткой, хочу сделать чтобы при наведении (Hover) блок выезжал вниз, появлялась скрытая область , при этом не раздвигались все элементы сетки, не двигались блоки.

примерно как здесь при наведении на карточку товара.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Пример моей сетки с карточками куда, хочу вставить выезжающие доп.блоки

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[funman]

js - show on mouse hover

нашел пример

<div style="width: 80px; height: 20px; background-color: red;"
        onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;">Text</div>
</div>

или вы не про это? суть я так понимаю примерна такая же как в самом CSS прописать hover.
Но вопрос не как скрыть, спрятать элемент, я понимаю что в стиле нужно менять Display или
opacity

Проблема в том, что в сетке у меня блоков , жестко задан "height:" чтобы блоки были одной длины.
если на события hover для отдельного блока менять "height:" он двигает блоки внизу, а хотелось бы эффект наплыва, как в примерах выше. Я понимаю, что как то через Z-index там происходит наложение, но просто задать для все блоков Z-index: 1 а для Hover Z-index:999 не работает, или я чтото не то делаю, какие свойства стилей еще нужно поменять чтобы при событии HOVER он вылез поверх нижнего слоя ничего не двигая?

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[zALEHANz]

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Добавил обертку контента каждого блока. Прописал ей абсолютное позиционирование. Блоки не меняют высоту при наведении, у них можно очистить визуальные стили, сделав полностью прозрачными и прописать визуальные стили обертке. При наведении мыши на блок присваивается больший z-index, обертка увеличивает высоту.
Есть правда неприятный момент, когда мышь уводишь с блока он сразу перестает быть сверху.
PS кстати, при абсолютном позиционировании можно так же безболезненно увеличить не только высоту но и ширину и сдвинуть в любом направлении, при этом сетка никак на это кощунство не отреагирует)))

 

[Alekxander]

Интересует данный вопрос. Прочитал простое решение на CSS. Но при добавлении position:absolute вёрстка продуктов плывёт. Понять бы как исправить.
Может кто подскажет ещё варианты. Либо подскажет почему может вёрстка съехать.
Тема с вариантами.

Пробовал это вариант.
Для просмотра ссылки Войди или Зарегистрируйся
Здесь всё красиво, a у меня нижние блоки уходят сразу вверх.

 

[Didi]

Пробовал это вариант.
Для просмотра ссылки Войди или Зарегистрируйся
Здесь всё красиво, a у меня нижние блоки уходят сразу вверх.

А ваш пример где (тот что не работает) ?

 

[Alekxander]

А ваш пример где (тот что не работает) ?

Ссори, я думал просто есть ещё варианты как сделать. Сейчас придумаю как организовать.
Сайт пока не готов, только частично.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[Didi]

Вообщето нужно было показать где именно нужен данный функционал.
Я так понял что наверно на внутренних страницах товаров.
Вот:
Для просмотра ссылки Войди или Зарегистрируйся
Тут все и так стояло но нехватало position:absolute;

 

[Alekxander]

Вообщето нужно было показать где именно нужен данный функционал.
Я так понял что наверно на внутренних страницах товаров.
Вот:
Для просмотра ссылки Войди или Зарегистрируйся
Тут все и так стояло но нехватало position:absolute;

Я так понимаю position:absolute добавить для hover ?
Потому как если добавляю сразу для дива, то вёрстка как бы сворачивается в один ряд.
Я потом попозже попробую.
Спасибо за содействие.
Получилось!
Таки да, добавил свойство position:absolute только для hover и всё как надо.
Нижний блок не сдвигается. Правда некоторые блоки при наведении уменьшаются
по ширине. Но есть подозрение что это из-за разных картинок. Картинки пока как демо.
Думаю потом должно быть нормально, когда сделать пропорции одинаково.
Ещё раз благодарю.

 

[Alekxander]

Вот:
Для просмотра ссылки Войди или Зарегистрируйся
Тут все и так стояло но нехватало position:absolute;

В обще рано радовался. (((
В моём случае видимо ещё какие-то стили накладываются и не хочет работать как надо.
Первый блок с товаром всё отлично.
Для просмотра ссылки Войди или Зарегистрируйся
А вот дальше хуже. Особенно крайний справа. Смещается по ширине. Сначала думал из-за картинок такое. Картинки перезалил квадратные. Но увы...
Для просмотра ссылки Войди или Зарегистрируйся

 

[Didi]

просто описка в коде у вас:
Для просмотра ссылки Войди или Зарегистрируйся