<img src="https://picsum.photos/id/182/300/300">
<img src="https://picsum.photos/id/151/300/300">
/* Shape taken from: https://css-generators.com/blob/ */
:nth-child(1 of img) {
clip-path: shape(from 90.89% 45.64%,curve to 93.04% 54.85% with 93.56% 50.00%,curve to 88.92% 63.36% with 92.52% 59.71%,curve to 85.12% 72.43% with 85.31% 67.01%,curve to 80.16% 79.84% with 84.93% 77.86%,curve to 71.71% 84.64% with 75.38% 81.83%,curve to 64.58% 93.09% with 68.04% 87.45%,curve to 55.56% 93.65% with 61.12% 98.72%,curve to 44.63% 92.82% with 50.00% 88.58%,curve to 35.60% 92.27% with 39.26% 97.07%,curve to 26.56% 86.82% with 31.95% 87.48%,curve to 20.85% 79.83% with 21.17% 86.16%,curve to 13.55% 72.21% with 20.53% 73.50%,curve to 4.51% 65.88% with 6.58% 70.91%,curve to 5.39% 55.43% with 2.45% 60.85%,curve to 9.90% 45.60% with 8.32% 50.00%,curve to 12.31% 36.73% with 11.47% 41.21%,curve to 14.90% 27.83% with 13.14% 32.25%,curve to 20.42% 20.52% with 16.65% 23.41%,curve to 27.53% 13.96% with 24.19% 17.64%,curve to 36.18% 11.48% with 30.88% 10.29%,curve to 45.74% 10.19% with 41.48% 12.66%,curve to 55.18% 6.14% with 50.00% 7.71%,curve to 65.11% 6.68% with 60.37% 4.57%,curve to 73.49% 12.38% with 69.85% 8.79%,curve to 78.33% 21.21% with 77.14% 15.97%,curve to 85.48% 28.25% with 79.52% 26.46%,curve to 89.83% 35.66% with 91.44% 30.04%,curve to 90.89% 45.64% with 88.22% 41.28%);
}
:nth-child(1 of img):hover {
clip-path: shape(from 93.57% 45.24%,curve to 94.25% 54.92% with 95.40% 50.00%,curve to 91.21% 64.39% with 93.09% 59.83%,curve to 82.47% 69.68% with 89.33% 68.94%,curve to 76.05% 76.82% with 75.61% 70.43%,curve to 73.29% 87.47% with 76.49% 83.21%,curve to 64.23% 89.18% with 70.09% 91.73%,curve to 54.18% 85.13% with 58.36% 86.63%,curve to 44.68% 90.11% with 50.00% 83.62%,curve to 35.62% 92.12% with 39.37% 96.59%,curve to 25.97% 87.59% with 31.87% 87.65%,curve to 22.23% 78.97% with 20.08% 87.52%,curve to 18.27% 69.32% with 24.39% 70.42%,curve to 11.59% 63.56% with 12.16% 68.22%,curve to 9.58% 54.45% with 11.01% 58.90%,curve to 8.54% 45.31% with 8.15% 50.00%,curve to 11.77% 36.79% with 8.93% 40.63%,curve to 18.58% 30.53% with 14.62% 32.96%,curve to 25.19% 25.15% with 22.55% 28.11%,curve to 31.39% 20.48% with 27.83% 22.20%,curve to 37.40% 12.13% with 34.96% 18.77%,curve to 44.92% 8.23% with 39.84% 5.49%,curve to 55.38% 6.93% with 50.00% 10.97%,curve to 62.14% 12.40% with 60.75% 2.89%,curve to 69.63% 19.83% with 63.53% 21.90%,curve to 80.82% 19.55% with 75.72% 17.75%,curve to 82.60% 28.63% with 85.92% 21.35%,curve to 85.51% 38.19% with 79.28% 35.90%,curve to 93.57% 45.24% with 91.73% 40.48%);
}
:nth-child(2 of img) {
clip-path: shape(from 87.74% 45.93%,curve to 90.63% 54.66% with 85.92% 50.00%,curve to 93.32% 63.52% with 95.34% 59.32%,curve to 88.24% 71.11% with 91.29% 67.72%,curve to 79.93% 75.22% with 85.19% 74.49%,curve to 74.69% 82.81% with 74.66% 75.95%,curve to 69.60% 89.37% with 74.72% 89.67%,curve to 60.57% 91.29% with 64.47% 89.08%,curve to 52.16% 94.84% with 56.66% 93.50%,curve to 44.22% 90.90% with 47.66% 96.19%,curve to 37.66% 83.56% with 40.78% 85.60%,curve to 30.11% 81.47% with 34.54% 81.52%,curve to 21.20% 80.00% with 25.67% 81.43%,curve to 11.71% 76.30% with 16.73% 78.56%,curve to 10.31% 67.68% with 6.69% 74.04%,curve to 13.20% 57.57% with 13.93% 61.32%,curve to 9.63% 49.71% with 12.46% 53.82%,curve to 11.93% 42.64% with 6.79% 45.61%,curve to 15.21% 34.66% with 17.08% 39.67%,curve to 13.23% 23.99% with 13.34% 29.65%,curve to 20.19% 19.48% with 13.11% 18.33%,curve to 30.70% 19.14% with 27.27% 20.64%,curve to 36.61% 12.77% with 34.13% 17.64%,curve to 43.65% 11.20% with 39.10% 7.89%,curve to 52.55% 9.76% with 48.20% 14.51%,curve to 61.28% 6.34% with 56.89% 5.01%,curve to 69.79% 9.65% with 65.68% 7.67%,curve to 76.09% 15.95% with 73.91% 11.63%,curve to 80.21% 23.94% with 78.26% 20.27%,curve to 87.77% 29.50% with 82.16% 27.62%,curve to 91.47% 36.63% with 93.37% 31.39%,curve to 87.74% 45.93% with 89.56% 41.87%);
}
:nth-child(2 of img):hover {
clip-path: shape(from 88.47% 46.07%,curve to 84.54% 53.13% with 88.65% 50.00%,curve to 88.16% 62.97% with 80.44% 56.25%,curve to 88.08% 70.38% with 95.88% 69.69%,curve to 81.79% 78.06% with 80.28% 71.07%,curve to 75.10% 81.07% with 83.31% 85.04%,curve to 65.95% 83.80% with 66.89% 77.10%,curve to 60.12% 87.37% with 65.00% 90.51%,curve to 51.63% 86.71% with 55.24% 84.22%,curve to 44.65% 86.43% with 48.01% 89.20%,curve to 36.95% 84.55% with 41.28% 83.67%,curve to 26.62% 86.70% with 32.62% 85.42%,curve to 20.05% 82.08% with 20.61% 87.97%,curve to 16.04% 73.48% with 19.49% 76.19%,curve to 14.40% 65.68% with 12.58% 70.77%,curve to 15.40% 57.10% with 16.22% 60.60%,curve to 16.67% 50.21% with 14.59% 53.60%,curve to 16.72% 42.87% with 18.74% 46.82%,curve to 12.59% 33.49% with 14.70% 38.93%,curve to 14.74% 25.73% with 10.47% 28.06%,curve to 24.14% 23.30% with 19.02% 23.40%,curve to 30.09% 17.16% with 29.25% 23.20%,curve to 35.32% 10.68% with 30.93% 11.13%,curve to 43.96% 12.52% with 39.70% 10.23%,curve to 52.87% 7.82% with 48.22% 14.80%,curve to 61.93% 3.36% with 57.53% 0.84%,curve to 66.73% 14.20% with 66.34% 5.89%,curve to 73.86% 20.17% with 67.13% 22.51%,curve to 83.99% 20.89% with 80.59% 17.82%,curve to 85.35% 29.84% with 87.40% 23.97%,curve to 85.79% 38.92% with 83.30% 35.71%,curve to 88.47% 46.07% with 88.28% 42.13%);
}
body {
min-height: 100vh;
margin: 0;
display: grid;
place-content: center;
grid-auto-flow: column;
gap: 20px;
background: #c3a894;
}
img {
width: 280px;
aspect-ratio: 1;
cursor: pointer;
/* from https://linear-easing-generator.netlify.app/ */
transition: 1.3s 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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.