JSFiddle - React, Tailwind, and code Playground

HTML

Use case: A funny reveal animation. Scalable and we can easily adjust the image inline (imagine all the effect we can achieve using the same technique)
<br>
<div class="box" style="--i:url(https://picsum.photos/id/102/200/200)">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="box" style="--i:url(https://picsum.photos/id/1069/200/200)">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="box" style="--i:url(https://picsum.photos/id/1015/200/200)">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.box {
  width:200px;
  height:200px;
  margin:6px;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  overflow:hidden
}

.box div::before,
.box::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  background:var(--i) center/cover;
}
.box::before {
  filter:grayscale(1)
}
.box div {
  transition:0.5s;
}
.box div:nth-child(1) {clip-path:inset(0 100% 100% 0)}
.box div:nth-child(2) {clip-path:inset(0 0 100% 100%)}
.box div:nth-child(3) {clip-path:inset(100% 100% 0 0)}
.box div:nth-child(4) {clip-path:inset(100% 0 0 100%)}

.box:hover div {
  clip-path:inset(0 0 0 0);
}