CSS3 - How to override the padding of a parent element?

Question

I have a div element in the shape of a circle using this code:

#circle{
width: 320px;
height: 320px;
background-image: url('image.jpg');
border-radius: 50%;
background-position: 50% 50%;
transition: all 1s;
}

That expands on hovering using this code:

#circle:hover{
margin-top:-50px;
width: 400px;
height: 400px;
}

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.

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!

Answer 1

Unfortunately there is no css that can access the parent element of an item.

I found this thread which outlines how you might accomplish this task.

Answer 2

You can use "position" or "display". I hope this http://css-tricks.com/absolute-positioning-inside-relative-positioning/ may help you

Answer 3

How you tried with z-index?

The round element

z-index: 2;

and the parent element:

z-index: 1;