Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <img src="https://picsum.photos/id/182/300/300">
<img src="https://picsum.photos/id/151/300/300">
              
            
!

CSS

              
                /* 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);
}
              
            
!

JS

              
                
              
            
!
999px

Console