Некорректно работает поле oveflow:hidden

354
25 декабря 2016, 19:21

Поставил на блоки 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>

Answer 1

При наведении мышью на блок, он увеличивает высоту до 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%;
}
READ ALSO
Почему flexbox требует установки элемента в column?

Почему flexbox требует установки элемента в column?

Не могу разобраться, почему в шапке приходится выставлять элемент в column, а не в row, чтобы два новых блока в шапке располагались горизонтально

394
Проблема с hover и активной ссылкой в нём

Проблема с hover и активной ссылкой в нём

Здравствуйте, я решил сделать сайт по шаблону от wixcom, я только учусь, вот не могу понять как сделать так что бы блок с картинкой заливался желтым...

338
Проблема с аутентификацией

Проблема с аутентификацией

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

361