CSSのmix-blend-mode: differenceを使用した簡単画像の差分判定方法

<div id="main">
  <div>
    <p><img src="a1.png"></p>
    <p><img src="a2.png"></p>
    <p><img src="a3.png"></p>
  </div>
  <div>
    <p><img src="b1.png"></p>
    <p><img src="b2.png"></p>
    <p><img src="b3.png"></p>
  </div>
  <div>
    <p><img src="a1.png"></p>
    <p><img src="a2.png"></p>
    <p><img src="a3.png"></p>
  </div>
  <div>
    <p><img src="b1.png"></p>
    <p><img src="b2.png"></p>
    <p><img src="b3.png"></p>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  vertical-align: top;
}
#main {
  display: flex;
  position: relative;
}
#main p img {
  width: 200px;
  height: 200px;
  object-fit: contain;
}
#main div:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
}