title: CSS3 - How to override the padding of a parent element?
body: <p>I have a div element in the shape of a circle using this code:</p>
  
  <pre><code>#circle{
  width: 320px;
  height: 320px;
  background-image: url('image.jpg');
  border-radius: 50%;
  background-position: 50% 50%;
  transition: all 1s;
  }
  </code></pre>
  
  <p>That expands on hovering using this code:</p>
  
  <pre><code>#circle:hover{
  margin-top:-50px;
  width: 400px;
  height: 400px;
  }
  </code></pre>
  
  <p>Now this div element is inside another div element in the shape of a rectangle, or a box as some might say, that has a padding of 50px.
  When the circle expands, the top part of the circle gets hidden under the padding. Imagine it like, the top part of the circle gets cut off, while the 50px padding is there.</p>
  
  <p>What I want is, it will override the padding. it'll simply show above the padding, I hope you get what I'm trying to say here... If not, i'll try to explain in a better way. Thanks in advance!</p>