let etiqueta = document.querySelectorAll('.etiqueta');

etiqueta.forEach(link => {
    
    link.addEventListener("mouseover",() => { // mouseover cuando el mause entra al elemento etiqueta
	
        const t = link.getBoundingClientRect(); // calcula la posición de link(etiqueta) 
	let hijo = link.querySelectorAll('.hijo');

	hijo.forEach(l1 => {

	    l1.classList.add("edd1"); // solo quita un class, que le quita color red y la escala

	    function mover(e){

	       let left = e.pageX;
	       let top = e.pageY;
	       l1.style.left =  left - t.left + "px";
	       l1.style.top =   top - t.top  + "px";
	    };
	l1.parentNode.addEventListener("mousemove", mover);

	});
    });

    link.addEventListener("mouseleave",() => {// mouseleave cuando el mouse salio del elemento etiqueta
	let hijo = link.querySelectorAll('.hijo');
	hijo.forEach(l2 => {
        l2.classList.remove("edd1"); // le solo quita un class, que le quita color red y la escala 1
	l2.parentNode.onmousemove = null;
	});
    });
});

//HTML

<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

//css
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0) translate(-50%,-50%); //posiciona el inicio 
transition: transform 0.9s ease;
}
.edd1{
transform:scale(5) translate(-50%,-50%); // posiciona cuando ya sufrio la escala 5
transform-origin: 0% 0%;
background-color: red;
}