<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt="">
</div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
</div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
</div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>

<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>

<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>

<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
<div><img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt=""></div>
body {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

img {
  max-width: 100%;
}

div{
  background: url('https://bennettfeely.com/clippy/pics/pittsburgh.jpg'), linear-gradient(45deg, #3023AE 0%, #FF0099 100%);
  background-blend-mode: overlay, luminosity, screen, luminosity;
  background-size: cover;
  &:nth-child(1) img{
    clip-path: circle(40%);
  }
  &:nth-child(2) img{
    clip-path: circle(30% at center);
  }
  &:nth-child(3) img{
    clip-path: circle(80% at left top);
  }
  &:nth-child(4) img {
    clip-path: circle(80% at right top);
  }
  &:nth-child(5) img {
    clip-path: circle(80% at right bottom);
  }
  &:nth-child(6) img {
    clip-path: circle(80% at left bottom);
  }
  &:nth-child(7) img {
    clip-path: circle(30% at 30%);
  }
  &:nth-child(8) img {
    clip-path: circle(30% at 30% 40%);
  }
  &:nth-child(9) img {
    clip-path: circle(30% at 80% 60%);
  }
  &:nth-child(10) img {
    clip-path: circle(closest-side);
  }
   &:nth-child(11) img {
    clip-path: circle(farthest-side);
  }
  
  &:nth-child(12) img {
    clip-path: circle(closest-side at 65% 50%);
  }
   &:nth-child(13) img {
    clip-path: circle(farthest-side at 50% 100%);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.