Scale & Clip-Path

by Julien Roche

HTML

<img src="https://picsum.photos/600/600" width="600" height="600" />

CSS

img {
  clip-path: inset(0% round 0px);
  
  @media (prefers-reduced-motion: no-preference) {
    transition: scale .2s ease, clip-path .2s ease;
    will-change: scale, clip-path;

    &:hover {
      scale: 1.2;
      clip-path: inset(10% round 20px);
    }
  }
}