<img src="https://picsum.photos/id/91/250/250" alt="A man holding a camera">
<img src="https://picsum.photos/id/250/250/250" alt="A camera">
img {
  --f: 1.15; /* the scale factor */
  
  clip-path: inset(0);
  transition: .4s;
  cursor: pointer;
}
img:hover {
  clip-path: inset(calc((1 - 1/var(--f)) * 50%));
  scale: var(--f)
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 80px;
  background: #CFBE27;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.