Поставил на блоки overlow:hidden
и height:300px
. При наведении мышью на блок, он увеличивает высоту до 100%
. И скрытая информация отображается, вот только при этом другие блоки смещаются, а нужно что бы скрытый блок всего лишь перекрывал часть другого блока, а не смещал. Как это исправить?
ВНИМАНИЕ! После того, как вы нажмете на "Выполнить код" разверните страницу во весь экран
/* АДМИН ПАНЕЛЬ */
.admin-block {
border-radius: 2px;
margin: 1rem;
display: inline-block;
height: 300px;
overflow: hidden;
box-shadow: 0 0 20px;
transition: 0.4s;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.admin-block:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
height: 100%;
}
.btn {
width: 100%;
background: #e0e0e0;
border-radius: 0;
}
<section>
<div style="text-align: center;">
<div>
<div class="admin-block">
<img src="https://i.stack.imgur.com/4pXv6.png" alt="">
<div class="caption">
<h4>ГАЛЕРЕЯ</h4>
<p>Редактирование раздела <br> "Галерея"</p>
<a class="btn" title="send" href="?option=edit_gallery">перейти</a>
</div>
</div>
<div class="admin-block">
<a href="?option=edit_users"><img src="https://i.stack.imgur.com/571yh.png" alt=""></a>
<div class="caption">
<h4>ПОЛЬЗОВАТЕЛИ</h4>
<p>Редактирование раздела <br> "Пользователи"</p>
<a class="btn" title="send" href="?option=edit_gallery">перейти</a>
</div>
</div>
</div>
<div>
<div class="admin-block">
<img src="https://i.stack.imgur.com/Ajpmo.png" alt="">
<div class="caption">
<h4>БИОГРАФИЯ</h4>
<p>Редактирование раздела <br> "Биография Федора М.М."</p>
<a class="btn" title="send" href="?option=edit_gallery">перейти</a>
</div>
</div>
<div class="admin-block">
<a href="?option=edit_statii"><img src="https://i.stack.imgur.com/nzINl.png" alt=""></a>
<div class="caption">
<h4>СТАТЬИ</h4>
<p>Редактирование раздела <br> "Статьи"</p>
<a class="btn" title="send" href="?option=edit_gallery">перейти</a>
</div>
</div>
</div>
<div>
<div class="admin-block">
<img src="https://i.stack.imgur.com/G8NAy.png" alt="">
<div class="caption">
<h4>ВООРУЖЕНИЕ</h4>
<p>Редактирование раздела <br> "Вооружение"</p>
<a class="btn" title="send" href="?option=edit_gallery">перейти</a>
</div>
</div>
<div class="admin-block">
<img src="https://i.stack.imgur.com/j2X20.png" alt="">
<div class="caption">
<h4>НАГРАДЫ</h4>
<p>Редактирование раздела <br> "Награды"</p>
<a class="btn" title="send" href="?option=edit_gallery">перейти</a>
</div>
</div>
</div>
</div>
</section>
При наведении мышью на блок, он увеличивает высоту до 100%.
.admin-block:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
height: 100%;
}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Не могу разобраться, почему в шапке приходится выставлять элемент в column, а не в row, чтобы два новых блока в шапке располагались горизонтально
Здравствуйте, я решил сделать сайт по шаблону от wixcom, я только учусь, вот не могу понять как сделать так что бы блок с картинкой заливался желтым...
Зарегистрировался, потом этими данными захожу, зашел не проблем, а потом когда перехожу для просмотра заказа, автоматически выходитьДа мой...