I've created a circle-shaped div element using the following code:
#circle{
width: 320px;
height: 320px;
background-image: url('image.jpg');
border-radius: 50%;
background-position: 50% 50%;
transition: all 1s;
}
This circle expands on hover with this code:
#circle:hover{
margin-top:-50px;
width: 400px;
height: 400px;
}
Now, I have placed this circular div element inside another rectangle-shaped div element that has a padding of 50px. When the circle expands, part of it gets hidden under the padding. It's like the top portion of the circle is being cut off by the 50px padding.
What I'm looking for is to have the circle override the padding and show above it. Essentially, I want the expanded circle to be visible above the padding. Hopefully, you understand what I mean. If not, let me know and I'll try to clarify further. Thanks in advance!