html - CSS 动画移动不需要的对象

Question

我在图像上使用悬停动画，悬停时图像会变大。然而，这也会移动下面的文本，我不希望这样。

如何让它忽略文本？

aside div {
  background: url('http://www.law.kuleuven.be/canon_law/Pictures/staff/pasfoto.jpg/download');
  overflow: hidden;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: 0.2s;
  margin: 0 auto;
  position: relative;
  top: -50px;
}

aside div:hover {
  padding: 0;
  width: 110px;
  height: 110px;
}

aside section {
  position: absolute;
  text-align: center;
  width: 300px;
  height: 500px;
  background: #fff;
}

<section>
  <aside>
    <section>
      <div>
      </div>
      <h1>John Doe</h1>
      <p>placeholder <br /> more placeholder.</p>
    </section>
  </aside>
</section>

Answer 1

像这样？

aside div {
  background: url('http://www.law.kuleuven.be/canon_law/Pictures/staff/pasfoto.jpg/download');
  overflow: hidden;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: 0.2s;
  margin: 0 auto;
  position: relative;
  top: -50px;
}
aside> section{
position:relative;
}
aside> section> div{
position:absolute;
left:0px;
right:0px;
margin:auto;
top:0px;
}
aside >section> div:hover {
  padding: 0;
  width: 110px;
  height: 110px;
}

aside > section {
  text-align: center;
  width: 300px;
  height: 500px;
  background: #fff;
}
section > h1{
  padding-top:125px;
}

<section>
  <aside>
    <section>
      <div>
      </div>
      <h1>John Doe</h1>
      <p>placeholder <br /> more placeholder.</p>
    </section>
  </aside>
</section>