@skyfly2010

Как сделать div растягивающийся поверх другого div?

Добрый день. Есть следующая конструкция:
<div class="row">
<div class="col-lg-4  short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4  short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4 short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4 short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4 short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
<div class="col-lg-4 short">
<h2>Заголовок</h2>
<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>
</div>
</div>

Сейчас все это дело выглядит следующим образом:
Пользователю виден только заголовок списка. Если происходит onmouseenter на блок, то блок увеличивается в размерах вертикально. Если сделать onmouseleave, то возвращается в прежние размеры. Размеры блока регулируются при помощи js, который вычисляет размеры, на которые надо увеличить блок, плюс в зависимости от ширины экрана добавляет коэффициенты поправки, которые правильно разворачивают блок на разных устройствах. При этом, соседние блоки визуально тоже изменяются в размерах, как показано на рис 1 и рис 2. но фактически их размеры не меняются.
5e5ce793775de552135852.jpeg

Что я хочу сделать:
Я хочу изменять размеры блока при наведении мыши вертикально вниз, при этом не затрагивая соседние блоки. Список который должен отобразиться должен накрыть нижний блок, как показано на рисунке 3. Хочу сделать это без js, т.к. знаю, что в связке css+html реально можно это сделать, но мое сознание никак не может достичь желаемого результата. Заранее большое спасибо всем, кто поможет мне ликвидировать безграмотность.
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Абсолютным позиционированием.
https://jsfiddle.net/Louf1zbt/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 ₽
2UP Ростов-на-Дону
от 80 000 до 120 000 ₽
Gaskar Group Санкт-Петербург
от 120 000 ₽
04 апр. 2020, в 23:07
30000 руб./за проект
04 апр. 2020, в 23:05
100000 руб./за проект
04 апр. 2020, в 22:57
2000 руб./за проект