css - href 因悬停过渡而移动

Question

我正在这个网站上工作 http://communicatieteam.nl/cvdw/

我对灯箱有疑问。由于我正在尝试进行悬停过渡，如果您将鼠标悬停在它们上方，则这些框会转到下一行。

这是 HTML:

<section id="collegas">
     <h2>COLLEGA'S</h2>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_bas.jpg"><p>Bas</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_debbie.jpg"><p>Debbie</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_eefje.jpg"><p>Eefje</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_francien.jpg"><p>Francien</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_frank.jpg"><p>Frank</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_gonnie.jpg"><p>Gonnie</p></a>
 <a href="http://communicatieteam.nl/ons-team-2/"><img
    src="images/collega_henk.jpg"><p>Henk</p></a>
</section>

这是 css:

#collegas img {
    border: 0;
    transition: all 0.3s ease 0s;
    display:block;
}

#collegas img:hover {
  box-shadow: inset 0 0 0 5px #e84e0e;
  -webkit-box-shadow: inset 0 0 0 5px #e84e0e;
  -moz-box-shadow: inset 0 0 0 5px #e84e0e;
  padding: 10px;
}

#collegas a {
    width: 33%;
    display: block;
    padding: 0px 15px 0px 15px;
}

你们会如何解决这个问题？所以盒子留在原地？感谢您的帮助。

Answer 1

设置#collegas a的高度为固定值，比如130px。

#collegas a {
    width: 33%;
    display: block;
    padding: 0px 15px 0px 15px;
    height: 130px;
}