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;
} 

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

etiqueta.forEach(link => {
    link.addEventListener("mouseover",() => {
      let hijo = link.querySelectorAll('.hijo');
      
      hijo.forEach(l1=>{
        l1.classList.add("edd1");
      });
   });

    link.addEventListener("mouseleave",() => {
      let hijo = link.querySelectorAll('.hijo');
    
      hijo.forEach(l1=>{
        l1.classList.remove("edd1");
      });
   });
});

//css 
body{
display: flex;
}
.box{
width: 200px;
height: 200px;
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;
transition: all 0.2s ease;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{ /* la class que se agrega y se quita*/
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
};

//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>

<div class="box">
    <div class="cambio"><a class="enlase" href="#">Inicio</a></div>
    <div class="cambio"><a class="enlase" href="#">Horario</a></div>
    <div class="cambio"><a class="enlase" href="#">Blog</a></div>
</div>


// css 
.box{
width: 60vw;
height: 30px;
background: gray;
display: flex;
justify-content: space-around;
}
.cambio{
    height: 100%;
    background: blue;
}
.cambio a{
    display: inline-block;
    width: 100px;
    height: 100%;
    color: white;
}
.active a{
    background: red;
}
.active{
    background:red;
}

// javascript

//metodo (1): se señala al elementi que dispara con la i del for
//            la clase active sirve como puente, sin nesecidad que este en el css

let cambio = document.querySelectorAll(".cambio");
for(let i = 0; i < cambio.length; i++) {
    cambio[i].addEventListener("click", () =>{
	cambio.forEach(link => {
	    link.classList.remove("active");
	});
	cambio[i].classList.add("active");
    });
};

// metodo(2): delegación de evento e.target detecta al elemento que dispara
//            la clase active se incluye en el css 
//            se trabaja solo con enlase.

let enlase = document.querySelectorAll(".enlase");
enlase.forEach(lin => {
    lin.addEventListener("click", (e) => {
    enlase.forEach(link => { // es el enlase cuando  ya tiene el evento click
	link.classList.remove("active");
    });
    e.target.classList.add("active"); // detecta donde se iso click(elemento)
    });
});

<div id="uno" >
  <div id="dos" >
    <div id="tres" ></div>
  </div>
</div>

<section class="destacada">
  <div class="contenido text-center">
    <h1 class="estilo"> Ayuda </h1>
    <img src="http://picsum.photos/100/100"/>
  </div>
</section> 

//css 
.destacada img{
  width: 50px;
  height: 50px;
}

 h1:hover ~ img{
  width: 200px; /*O lo que quieras*/
  height: 200px; /*O lo que quieras*/ 
}

let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.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); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>