css circle with overlay

1// html 
2<div class="container"> <!-- container is just for centering, it is not needed in the solution  -->
3  <div class="circle">
4    <div class="overlay">
5    </div>
6  </div>
7</div>
8
9// Css
10
11html, body {
12  margin: 0;
13}
14.container {
15  width: 100vw;
16  height: 100vh;
17  margin:0;
18  display: flex;
19  justify-content: center;
20  align-items: center;
21  background-color: rgb(64, 64, 64);
22}
23.circle {
24  width: 200px;
25  height: 200px;
26  border-radius: 100px;
27  background-color: rgb(21, 156, 228);
28}
29.overlay {
30  position: absolute;
31  width: 200px;
32  height: 200px;
33  border-radius: 100px;
34  opacity: 0;
35  background-color: black;
36  transition: .4s ease;
37}
38.overlay:hover {
39	opacity: .4;
40}