Imagen amasale

Chicuelos, la verdad no soy experta en tema de códigos, pero les voy a compartir todos mis pocos conocimientos para que puedan tener un blog bonito.

Me pidieron el código de la Bonnie amasable que tengo, así que se los vengo a explicar lo mejor que puedo. 

CóDIGO

<div class="squish-bonnie">

  <img id="bonnieImg" src="EL LINK DE TU IMAGEN AQUI" alt="bonnie amasable" />

</div>

<style>

.squish-bonnie {

  width: 170px;

  margin: 0 auto;

  overflow: hidden;

}

.squish-bonnie img {

  width: 100%;

  transition: transform 0.2s ease-out;

  transform-origin: center;

}

</style>

<script>

const bonnie = document.getElementById("bonnieImg");

bonnie.addEventListener("mousemove", function(e) {

  const rect = bonnie.getBoundingClientRect();

  const x = e.clientX - rect.left;

  const y = e.clientY - rect.top;

  const centerX = rect.width / 2;

  const centerY = rect.height / 2;

  const scaleX = 1 + (x - centerX) / centerX * 0.15;

  const scaleY = 1 + (y - centerY) / centerY * 0.15;

  bonnie.style.transform = `scale(${scaleX}, ${scaleY})`;

});

bonnie.addEventListener("mouseleave", function() {

  bonnie.style.transform = "scale(1,1)";

});

</script>

Chicuelos creo que este es el código más sencillito, les recomiendo hacerlo en notas para no perderse, lo único que tienen que haces es tomar la foto que quieran que se amase, copiar la dirección de imagen y ponerla donde dice "el link de tu imagen aquí" SIN QUITAR LAS COMILLAS y luego de esto esto copiarlo en su gadgets y ¡listo! 

Recuerden dejar todos los espacios que tiene el código y si por alguna razón les falla, pueden preguntar al ChatGPT, que eso es lo que hago yo con mis gadgets para no morir en el intento.