<img src="https://picsum.photos/id/1069/400/400">
@property --c-0 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --c-1 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
img {
  -webkit-mask:
     linear-gradient(rgba(0,0,0,var(--c-0)) 0 0) left,  /* 1 */
     linear-gradient(rgba(0,0,0,var(--c-1)) 0 0) right; /* 2 */
  -webkit-mask-size:50% 100%;
  -webkit-mask-repeat:no-repeat;
  transition:--c-0 0.5s, --c-1 0.3s 0.4s;
}
img:hover {
  --c-0:0;
  --c-1:0;
}
body {
  background:pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.