Yes, the positioning of the parent container is set to relative.
I am attempting to achieve a ripple effect by expanding multiple circles from a central point in all directions until they stretch beyond the viewport.
I have created circular divs that are absolutely positioned and centered on the screen. Upon clicking on them, a new class called grow is added which increases their width and height to trigger the expansion effect. However, I'm facing an issue where the x-overflow isn't hidden when the circles expand beyond the viewport boundaries.
Notably, once a circle reaches the left edge of the viewport, it continues to expand in other directions but seems unable to cross the boundary of the window's edge.
<body>
<div class="circle"></div>
</body>
body {
position: relative;
}
.circle {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 1000px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all 1s ease-in-out;
overflow: hidden;
}
.grow {
border: 1px solid #000;
width: 2000px;
height: 2000px;
}
$(".circle").click(function() {
$(this).addClass("grow");
});