<img src="https://picsum.photos/id/1069/250/250" >
<img src="https://picsum.photos/id/1011/250/250" >

img {
  --g:#0000 ,#000 .5deg 90deg,#0000 91deg;
  --m:
    conic-gradient(from 45deg ,var(--g)) 20px 0  no-repeat,
    conic-gradient(from 135deg,var(--g)) 0 20px  no-repeat,
    conic-gradient(from 225deg,var(--g)) -20px 0 no-repeat,
    conic-gradient(from 315deg,var(--g)) 0 -20px no-repeat;
  -webkit-mask: var(--m);
          mask: var(--m);
  transition: .3s linear;
  filter: grayscale(.5);
  cursor: pointer;
}
img:hover {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  filter: grayscale(0);
}

body {
  margin: 0;
  background: #ccc;
  display: grid;
  height: 100vh;
  grid-auto-flow :column;
  place-content: center;
  gap: 40px;
}