<picture>
    <img src="https://picsum.photos/id/1074/400/400" alt="">
</picture>
<picture class="one">
    <img src="https://picsum.photos/id/101/400/400" alt="">
</picture>
<picture class="two">
    <img src="https://picsum.photos/id/182/400/400" alt="">
</picture>
picture {
  width: 250px;
  display: inline-grid;
  margin: 5px;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
}
picture::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: 
    repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 
    60% 60%/3000px 3000px,
    repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 
    40% 40%/3000px 3000px;
  background-blend-mode: difference;
  mix-blend-mode: overlay;
  filter: blur(1px) contrast(4);
  -webkit-mask: radial-gradient(#0000 10%,#000 );
  transition: 0.8s;
  cursor: pointer;
}
picture.one::before {
  -webkit-mask: linear-gradient(45deg,#000,#0000 70%);
}
picture.two::before {
  -webkit-mask: linear-gradient(#0000 40%,#000);
}
picture:hover::before {
  opacity:0;
}

body {
  background: #ccc;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.