How do I enlarge the background image based on the center of the location?

I want to enlarge the background-image from thebackground-position origin. So I wrote the CSS like this:

div {
    height: 200px;
    width: 200px;
    background: radial-gradient(circle at left top , blue 50%, transparent 50%);;
    background-size: 10% 10%;
    background-position: top 50px right 50px;
    background-repeat: no-repeat;
    transition: all .5s;
}

div:hover {
    background-size: 100% 100%;
}

<div></div>

But this has the following problems:

1. When hovering, the background image moves greatly from the place specified by background-positon. However in fact, I want this to be such that only the background image circle expands on a background-position basis.
2. I use background-position to adjust the display position of the background image, but that makes the circle non-circular.

How can I realize my goal without above problems and without the scale function?