<img src="https://picsum.photos/id/193/800/800">
<img src="https://picsum.photos/id/193/800/800" style="--zoom:2;--x:10%">
<img src="https://picsum.photos/id/193/800/800" style="--zoom:2.5;--y:0%">
<img src="https://picsum.photos/id/193/800/800" style="--zoom:5;--x:100%;--y:60%">

img {
  --zoom: 1; /* control the zoom level */
  /* the coordinate of the zoom */
  --x: 50%;
  --y: 50%;
  /**/
  transform: scale(var(--zoom));
  transform-origin: var(--x) var(--y);
  clip-path: inset(
    calc((1 - 1/var(--zoom)) * (var(--y)))
    calc((1 - 1/var(--zoom)) * (100% - var(--x)))
    calc((1 - 1/var(--zoom)) * (100% - var(--y)))
    calc((1 - 1/var(--zoom)) * (var(--x)))
  );
  width: 200px;
}

body {
  background: pink;
  margin: 0;
  height: 100vh;
  display: grid;
  grid-auto-flow: column;
  grid-gap:20px;
  place-content: center;
  overflow: hidden;
}