Keep a div from moving when resized - css

Question

I am trying to position a div in a corner of my screen so that I can resize it to cover the screen.
Problem is, when I resize it the div moves as you can see in the snippet below. I tried to apply the effect on an pseudo-element but it did not help. Any idea how I can resize an item without it moving ?
Thank you for your help.
$('button').click(function(){
$(this).closest('div').find('.cover').toggleClass('active');
console.log("test");
})
.main{
display:flex;
justify-content:space-around;
}
.item {
width:350px;
height:350px;
background-color:teal;
position:relative;
overflow:hidden;
}
.item .cover {
transition:all .5s linear;
width:20px;
height:20px;
background-color:orange;
position:absolute;
inset:-10px -10px auto auto;
border-radius:50%;
}
.item.no-pseudo .cover.active {
width:200%;
height:200%;
}
}
button{
margin-top:1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="container">
<div class="item no-pseudo">
<div class="cover"></div>
</div>
<button class="no-pseudo">Click to toggle effect on element</button>
</div>
</div>

Answer 1

You can use transform:scale(x) instead, by default, transform-origin is done from the center of the element.
$('button').click(function(){
$(this).closest('div').find('.cover').toggleClass('active');
console.log("test");
})
.main{
display:flex;
justify-content:space-around;
}
.item {
width:350px;
height:350px;
background-color:teal;
position:relative;
overflow:hidden;
}
.item .cover {
transition:all .5s linear;
width:20px;
height:20px;
background-color:orange;
position:absolute;
inset:-10px -10px auto auto;
border-radius:50%;
}
.item.no-pseudo .cover.active {
transform:scale(50);
}
}
button{
margin-top:1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="container">
<div class="item no-pseudo">
<div class="cover"></div>
</div>
<button class="no-pseudo">Click to toggle effect on element</button>
</div>
</div>

Answer 2

Use scale instead of width and height.
$('button').click(function(){
$(this).closest('div').find('.cover').toggleClass('active');
console.log("test");
})
.main{
display:flex;
justify-content:space-around;
}
.item {
width:350px;
height:350px;
background-color:teal;
position:relative;
overflow:hidden;
}
.item .cover {
transition:all .5s linear;
width:20px;
height:20px;
background-color:orange;
position:absolute;
border-radius:50%;
}
.item.no-pseudo .cover.active {
transform:scale(20);
}
}
button{
margin-top:1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.2/sass.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="container">
<div class="item no-pseudo">
<div class="cover"></div>
</div>
<button class="no-pseudo">Click to toggle effect on element</button>
</div>
</div>