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>