<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.