How to make an animation of the zoom range?

There is a circle made of html + css when you hover it needs to increase, but from the center.
<div id='circle'></div>
#circle {
 width: 100px;
 height: 100px;
 background: red;
 left: 200px;
 top: 200px;
 transition: width .7s, height .7s;
 border-radius: 50%;
}

#circle:hover {
 height: 300px;
 width: 300px;
}

In this code, the center is shifting, and needs to be fixed, how it can be implemented without svg
March 19th 20 at 08:41
2 answers
March 19th 20 at 08:43
Solution


Even better is to change the size using the transform specifying the center using transform-origin

And what excuse is the meaning of prescribing the value of the property transform-origin with a value of center, which is the default? The extra few tens of bits of information to the file to build? - ardella.Orn4 commented on March 19th 20 at 08:46
@ardella.Orn4, Yes, on the default center. but in General, transform-origin is too useful to not mention. - elta_Anderso commented on March 19th 20 at 08:49
@elta_Anderso, What is the answer) - ardella.Orn4 commented on March 19th 20 at 08:52
March 19th 20 at 08:45
#circle:hover {
transform: scale(1.3);
}

Find more questions by tags HTMLJavaScript