<div class="parent"><h3 id="hed" data-title="✿ —Спасибо!— ✿">{{hed}}</h3>
  <div class="box" id="a">a</div><div class="box" id="b">b</div>
  <div class="box" id="c">c</div><div class="box" id="d">d</div>
</div>
<div class="parents"><div class="boxes" id="ee">ee</div>
  <div class="boxes" id="aa">aa</div><div class="boxes" id="bb">bb</div>
  <div class="boxes" id="cc">cc</div><div class="boxes" id="dd">dd</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script type="text/javascript">
new Vue({ el: '#hed',
              data: { hed: ''}}); /**/ 
</script>

body { background: 
repeating-linear-gradient(45deg, #666, #222, #666, #ea8, #666, #222, #666, #8ce, #666 2%) fixed; }
.parent { display: inline-block; z-index: 20; } 
.parents { display: inline-block; z-index: 10; }
#hed { display: block; margin: auto; padding: 5px; 
       text-align: center; font: bold italic 120% arial;}
#hed::before 
{ position: absolute; content: "Мышкуем здесь:";
  z-index: 10; top: 45%; left:2%; right:2%;  color: #bbb;
  border:  4px solid #aaa;  border-radius: 50px;  /* */
  background: linear-gradient(to top, #220, #666, #acc); /* */
}
.parent:hover #hed::after 
{ position: absolute; z-index: 12; top: 44%; left:2%; right:2%; 
              content: attr(data-title); color:#6ee; 
  border: 4px solid #aaa; border-radius: 50px;
  background: linear-gradient(to top, #220, #666, #acc);
} /*  */
.parent 
{ position: absolute; cursor: pointer; margin: auto; 
  z-index: 0; top: 20px; left: 20px; width: 200px; height: 200px; 
  background: 
  -webkit-radial-gradient(0% 0%,     circle, #fff0 19%, #000f 20%, #000f 50%, #0000 50%),
  -webkit-radial-gradient(100% 0%,   circle, #fff0 19%, #000f 20%, #000f 50%, #0000 50%),
  -webkit-radial-gradient(0% 100%,   circle, #fff0 19%, #000f 20%, #000f 50%, #0000 50%),
  -webkit-radial-gradient(100% 100%, circle, #fff0 19%, #000f 20%, #000f 50%, #0000 50%);
}
.box {display: none;} 
.parent:hover .box 
     { display: block; position: absolute; z-index:1;
       width: 50%; height: 50%; text-align: center;
       border: 4px solid #ccc8; border-radius: 50%; 
       background-image: 
       -webkit-radial-gradient( 50% 50%, circle, #cffe 1px, #000e 50px, #f000 52px ),
  /*-webkit-radial-gradient( 50% 50%, circle, #fff0 19%, #000f 20%, #000e 50%, #f00f 50% );*/
     }
#a,#b {top: -25%;}   #a,#c {left: -25%;}
#b,#d {right: -25%;} #c,#d {bottom: -25%;}

.parents { position: absolute; z-index: 0;  top: 20px; left: 320px; width: 200px; height: 200px; 
           margin:  auto; cursor: pointer;
  background: 
  -webkit-radial-gradient(0 50%,     circle, #000f 10%, #0000 10%),
  -webkit-radial-gradient(50% 0,     circle, #000f 10%, #0000 10%),
  -webkit-radial-gradient(100% 50%,  circle, #000f 10%, #0000 10%),
  -webkit-radial-gradient(50% 100%,  circle, #000f 10%, #0000 10%),
  -webkit-radial-gradient(50% 50%,   circle, #fff0 32%, #000 32.5%, #000 68%, #0000 68%),
  -webkit-radial-gradient(0 0,       circle, #fff0 16%, #000 16.5%, #000 34%, #0000 34%),
  -webkit-radial-gradient(100% 0,    circle, #fff0 16%, #000 16.5%, #000 34%, #0000 34%),
  -webkit-radial-gradient(0 100%,    circle, #fff0 16%, #000 16.5%, #000 34%, #0000 34%),
  -webkit-radial-gradient(100% 100%, circle, #fff0 16%, #000 16.5%, #000 34%, #0000 34%);}
.boxes {display: none;} /* display: none; */
.parents:hover .boxes 
      { display: block; position: absolute; z-index:1;
        width: 32%; height: 32%; padding: 10px; text-align: center;
        border: 6px solid #c0c8; border-radius: 50%; /* none;  display: none; */
        background-image: 
  -webkit-radial-gradient( 50% 50%, circle, #fff 0, #666f 64%, #ccc4 65%, #0aad 66%)
       }
#ee {top: 26%; left: 26%;} /*  */
#aa, #bb {top: -25%;}   #aa,#cc {left: -25%}
#bb,#dd {right: -25%} #cc,#dd {bottom: -25%}