I'm faced with a puzzling issue that I believe has a simple solution, but it seems to be eluding me at the moment. Essentially, I have a div containing an image as its background. Upon clicking this div, I want another circular div (created using border-radius) to expand from the center of the first div and grow past its boundaries, effectively covering it in a circle shape. While I can make the circle expand without any trouble, it appears to be stuck within the confines of the initial div's top and left edges due to how it is centered.
Below is the animation code:
$(".projectContainer").click(function(){
$(".circle").animate({
width:'+=600px',
height:'+=600px'},600);
});
The HTML structure:
<div class="projectContainer" id="A Head In The Box">
<div class="circleContCont"><div class="circleCont">
<div class="circle"></div>
</div></div>
</div>
And here are the CSS styles for the elements involved:
.projectContainer {
width:384px;
height:288px;
max-width:100%;
background-color:#FFF;
background-position: center center;
display:inline-block;
margin:7px;
overflow:hidden;
}
.circleContCont {
display:table;
height:100%;
width:100%;
vertical-align:middle;
}
.circleCont {
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.circle {
width:0px;
height:0px;
margin-left: auto;
margin-right: auto;
background: #FFF;
border-radius: 50%;
z-index:2;
}
The centering method used is based on a technique found here, which appears to be somewhat convoluted. There could possibly be a simpler approach to achieve the same result.
Edit: By changing the circle's position to absolute and animating the top and left values (-=300px), the circle can now extend beyond the parent div. However, maintaining central alignment remains a challenge. A video demonstration of how it was functioning before can be viewed here, while its current behavior is shown in this video.