<img src="https://picsum.photos/id/982/300/300">
<img src="https://picsum.photos/id/117/300/300">

/* Shape taken from: https://css-generators.com/blob/ 
   For each image you keep the same configuration and you only update the depth
   to have a nice transition
*/

:nth-child(1 of img) {
  clip-path: shape(from 99.33% 44.23%,curve to 99.33% 55.77% with 100.00% 50.00%,curve to 96.67% 66.99% with 98.65% 61.53%,curve to 91.49% 77.29% with 94.68% 72.44%,curve to 84.08% 86.12% with 88.30% 82.14%,curve to 74.83% 93.01% with 79.86% 90.11%,curve to 64.24% 97.58% with 69.80% 95.91%,curve to 52.89% 99.58% with 58.68% 99.24%,curve to 41.38% 98.91% with 47.09% 99.92%,curve to 30.33% 95.60% with 35.66% 97.90%,curve to 20.34% 89.83% with 25.00% 93.30%,curve to 11.96% 81.92% with 15.69% 86.37%,curve to 5.62% 72.29% with 8.23% 77.48%,curve to 1.68% 61.45% with 3.02% 67.10%,curve to 0.34% 50.00% with 0.34% 55.80%,curve to 1.68% 38.55% with 0.34% 44.20%,curve to 5.62% 27.71% with 3.02% 32.90%,curve to 11.96% 18.08% with 8.23% 22.52%,curve to 20.34% 10.17% with 15.69% 13.63%,curve to 30.33% 4.40% with 25.00% 6.70%,curve to 41.38% 1.09% with 35.66% 2.10%,curve to 52.89% 0.42% with 47.09% 0.08%,curve to 64.24% 2.42% with 58.68% 0.76%,curve to 74.83% 6.99% with 69.80% 4.09%,curve to 84.08% 13.88% with 79.86% 9.89%,curve to 91.49% 22.71% with 88.30% 17.86%,curve to 96.67% 33.01% with 94.68% 27.56%,curve to 99.33% 44.23% with 98.65% 38.47%);
}
:nth-child(1 of img):hover {
  clip-path: shape(from 90.22% 45.50%,curve to 94.24% 55.45% with 92.50% 50.00%,curve to 92.78% 65.39% with 95.97% 60.90%,curve to 84.28% 72.10% with 89.59% 69.88%,curve to 78.78% 81.35% with 78.97% 74.31%,curve to 72.84% 89.02% with 78.58% 88.39%,curve to 62.77% 93.75% with 67.10% 89.65%,curve to 53.02% 94.49% with 58.44% 97.85%,curve to 43.42% 88.53% with 47.60% 91.12%,curve to 32.51% 88.94% with 39.24% 85.93%,curve to 23.14% 86.61% with 25.79% 91.94%,curve to 18.99% 76.33% with 20.50% 81.27%,curve to 13.97% 67.89% with 17.49% 71.38%,curve to 7.44% 59.86% with 10.44% 64.40%,curve to 3.98% 49.95% with 4.44% 55.33%,curve to 9.20% 40.89% with 3.51% 44.57%,curve to 12.66% 30.60% with 14.89% 37.22%,curve to 14.82% 20.67% with 10.43% 23.97%,curve to 23.69% 14.78% with 19.21% 17.37%,curve to 32.14% 7.91% with 28.18% 12.20%,curve to 41.95% 7.84% with 36.11% 3.61%,curve to 52.22% 12.19% with 47.79% 12.07%,curve to 62.70% 9.41% with 56.64% 12.32%,curve to 71.78% 11.60% with 68.76% 6.50%,curve to 80.48% 18.18% with 74.80% 16.69%,curve to 87.11% 25.27% with 86.16% 19.66%,curve to 88.00% 35.94% with 88.07% 30.88%,curve to 90.22% 45.50% with 87.94% 41.01%);
}
:nth-child(2 of img) {
  clip-path: shape(from 97.98% 62.80%,curve to 93.74% 73.52% with 96.49% 68.41%,curve to 87.14% 82.97% with 90.99% 78.63%,curve to 78.53% 90.65% with 83.28% 87.31%,curve to 68.39% 96.13% with 73.78% 93.98%,curve to 57.25% 99.13% with 63.00% 98.28%,curve to 45.73% 99.48% with 51.51% 99.98%,curve to 34.43% 97.16% with 39.95% 98.98%,curve to 23.98% 92.30% with 28.92% 95.34%,curve to 14.92% 85.16% with 19.03% 89.26%,curve to 7.76% 76.12% with 10.82% 81.06%,curve to 2.88% 65.68% with 4.71% 71.18%,curve to 0.53% 54.39% with 1.04% 60.17%,curve to 0.85% 42.86% with 0.02% 48.60%,curve to 3.83% 31.72% with 1.69% 37.12%,curve to 9.29% 21.56% with 5.96% 26.32%,curve to 16.94% 12.94% with 12.61% 16.80%,curve to 26.38% 6.31% with 21.27% 9.08%,curve to 37.09% 2.05% with 31.49% 3.55%,curve to 48.50% 0.36% with 42.70% 0.54%,curve to 59.99% 1.35% with 54.30% 0.19%,curve to 70.94% 4.97% with 65.67% 2.52%,curve to 80.76% 11.01% with 76.20% 7.41%,curve to 88.92% 19.15% with 85.31% 14.60%,curve to 94.98% 28.96% with 92.53% 23.70%,curve to 98.62% 39.90% with 97.44% 34.22%,curve to 99.64% 51.39% with 99.80% 45.58%,curve to 97.98% 62.80% with 99.48% 57.19%)
}
:nth-child(2 of img):hover {
  clip-path: shape(from 92.03% 61.37%,curve to 90.36% 71.84% with 91.98% 66.62%,curve to 81.74% 77.40% with 88.73% 77.05%,curve to 70.96% 79.74% with 74.75% 77.75%,curve to 63.31% 83.42% with 67.16% 81.74%,curve to 55.39% 89.64% with 59.45% 85.11%,curve to 45.85% 95.57% with 51.34% 94.17%,curve to 37.37% 90.28% with 40.36% 96.97%,curve to 29.98% 82.28% with 34.38% 83.59%,curve to 23.27% 76.99% with 25.57% 80.97%,curve to 14.43% 71.35% with 20.97% 73.01%,curve to 11.52% 63.47% with 7.88% 69.70%,curve to 10.93% 53.01% with 15.16% 57.24%,curve to 7.43% 43.81% with 6.70% 48.79%,curve to 11.06% 34.73% with 8.15% 38.84%,curve to 16.04% 26.16% with 13.98% 30.63%,curve to 20.62% 16.71% with 18.11% 21.68%,curve to 29.63% 13.46% with 23.14% 11.74%,curve to 39.55% 8.82% with 36.12% 15.19%,curve to 47.97% 9.03% with 42.98% 2.45%,curve to 58.22% 12.41% with 52.97% 15.60%,curve to 68.37% 10.69% with 63.46% 9.21%,curve to 76.45% 16.24% with 73.27% 12.17%,curve to 84.46% 23.00% with 79.62% 20.31%,curve to 88.25% 31.66% with 89.30% 25.70%,curve to 87.73% 42.12% with 87.20% 37.63%,curve to 90.17% 51.36% with 88.26% 46.61%,curve to 92.03% 61.37% with 92.07% 56.11%)
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 20px;
  background: linear-gradient(60deg,#ffefd5,#F9CDAD);
}
img {
  width: 280px;
  aspect-ratio: 1;
  cursor: pointer;
  transition: .3s;
}
img:hover {
  transition: 1.3s var(--spring-easing);
}

/* from https://linear-easing-generator.netlify.app/ */
:root {
  --spring-easing: linear(0, 0.024, 0.068 1%, 0.22 2.2%, 0.968 6.1%, 1.221 7.7%, 1.314, 1.383, 1.426 10%, 1.438, 1.445, 1.447, 1.445 11.4%, 1.432, 1.405, 1.365 13.4%, 1.272 14.6%, 1.004 17.7%, 0.892 19.3%, 0.855, 0.828, 0.811, 0.802, 0.802, 0.808, 0.819, 0.837 24.8%, 0.879 26.1%, 0.998 29.1%, 1.048 30.8%, 1.076 32.2%, 1.084, 1.088 33.6%, 1.086, 1.077, 1.059 37.2%, 1.006 40.3%, 0.984 41.7%, 0.968 43.4%, 0.963, 0.961 45%, 0.962, 0.966 47.3%, 1.007 53.2%, 1.014, 1.017 56.4%, 1.015 58.8%, 0.997 64.6%, 0.992 67.8%, 0.993 70.2%, 1.001 75.9%, 1.003 78.9%, 0.999 90.2%, 1);
}