Put on blocks overlow:hidden and height:300px . When you hover the mouse over the block, it increases the height to 100% . And the hidden information is displayed, only with this other blocks are shifted, but it is necessary that the hidden block just covered part of another block, but not shifted. How to fix it?

ATTENTION! After you click on "Run code" expand the page in full screen

 /* АДМИН ПАНЕЛЬ */ .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>

  • To prevent the block from shifting other blocks, give it absolute positioning. - P. Fateev

1 answer 1

When you hover the mouse over the block, it increases the height to 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%; }
  • Take off height: 100% and it will stop increasing to 100%. It seems obvious? - Qwertiy ♦
  • So it does not help - FLWRZ4U
  • z-index tried to install? - Yuri
  • @Yuri, you need to rewrite a bunch of styles to make it work ... Because there are no styles for the parent element. - Qwertiy ♦
  • and what's wrong with the styles of the parent unit? everything seems normal, except that the transition is duplicated twice. and in order for the block not to shift other blocks in .admin-block: hover, you need to add the z-index above and that's it, then the transition will not shift the elements, but will slide out on top. And if it really goes to that height: auto is much better. - Yuri