<div class="container">
  <div class="item">
    <img class="img-0" src="https://i.ibb.co/cN10Zy0/p-KK-nl949-LQ.jpg" alt="">
    <p>original image</p>
  </div>
  <div class="item">
    <img class="img-1" src="https://i.ibb.co/cN10Zy0/p-KK-nl949-LQ.jpg" alt="">
    <p>object-view-box: inset(0% 20% -30% 50%)</p>
  </div>
  <div class="item">
    <img class="img-2" src="https://i.ibb.co/cN10Zy0/p-KK-nl949-LQ.jpg" alt="">
    <p>object-view-box: inset(0 660px 960px 0)</p>
  </div>
  <div class="item"><img class="img-3" src="https://i.ibb.co/cN10Zy0/p-KK-nl949-LQ.jpg" alt="">
    <p>zomm on hover object-view-box: inset(20%)</p>
  </div>
  <p class="alert">Your browser doesn't support CSS property object-view-box.</p>
</div>
body {
  display: flex;
  justify-content: center;
  background-color: #18191c;
  font-family: "Roboto", sans-serif;
  color: #ffffff;
}

.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

img {
  width: 250px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
}

.img-1 {
  object-view-box: inset(0% 20% -30% 50%);
}

.img-2 {
  object-view-box: inset(0 660px 960px 0);
}

.img-3 {
  object-view-box: inset(20%);
  cursor: pointer;
  animation: hover-out 0.75s ease-in-out;
}

.img-3:hover {
  animation: hover-in 0.75s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes hover-in {
  from {
    object-view-box: inset(20%);
  }
  to {
    object-view-box: inset(30%);
  }
}

@keyframes hover-out {
  from {
    object-view-box: inset(30%);
  }
  to {
    object-view-box: inset(20%);
  }
}

p {
  font-size: 14px;
}

@supports (object-view-box: inset(0)) {
  .alert {
    display: none;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.