<div class="img_producto_container" data-scale="1.6">
  <img class="dslc-lightbox-image img_producto" src="https://images.unsplash.com/photo-1657299156286-29f1a3a33ea3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=700&q=60">
  </img>
</div>

<center>

  <small>Image Courtesy of https://unsplash.com/@wasacrispbread</small>

</center>
.img_producto_container {
  width: 100%;
  max-width: 50vw;
  height: 500px !important;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  margin:auto;
}

.img_producto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform 0.5s ease-out;
}
  $(".img_producto_container")
  // tile mouse actions
  .on("mouseover", function() {
    $(this)
      .children(".img_producto")
      .css({ transform: "scale(" + $(this).attr("data-scale") + ")" });
  })
  .on("mouseout", function() {
    $(this)
      .children(".img_producto")
      .css({ transform: "scale(1)" });
  })
  .on("mousemove", function(e) {
    $(this)
      .children(".img_producto")
      .css({
        "transform-origin":
          ((e.pageX - $(this).offset().left) / $(this).width()) * 100 +
          "% " +
          ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +
          "%"
      });
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.