<div class="box">
  <img src="https://picsum.photos/id/251/800/400" >
  <div>
    <h2>A title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id augue eget leo iaculis ultricies sit amet sit amet nisl. Pellentesque aliquam eget ex quis pharetra.</p>
  </div>
</div>

<script>
if (CSS.paintWorklet) {              CSS.paintWorklet.addModule('/t_afif/pen/MWmoJGq.js');
}
</script>

@property --f-o{
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.box {
  --f-n:10;
  --f-m:10;
  max-width:400px;
  border-radius:15px;
  overflow:hidden;
  display:grid;
  margin:auto;
  background:#fff;
  cursor:pointer;
  grid-template-columns: 1fr 1fr;   
  box-shadow: 1px 2px 7px;
}
.box * {
  grid-row:1;
}
.box img {
  grid-column:1/-1;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
  display:block;
  --f-o:1;
  -webkit-mask: 
     linear-gradient(#000 0 0) left,
     paint(fragmentation) right;
  -webkit-mask-size:50% 100%;
  -webkit-mask-repeat:no-repeat;
  transition:--f-o 1s;
}
.box:hover img {
  --f-o:0;
}
.box div {
  grid-column:2;
  padding:10px;
}
body {
  background:pink;
}

registerPaint('fragmentation', class  {

  static get inputProperties() {
    return [
      '--f-n',
      '--f-m',
      '--f-o'
    ]
  }
  
  paint(ctx, size, properties) {

    const n = properties.get('--f-n');
    const m = properties.get('--f-m');
    const o = properties.get('--f-o');
    const w = size.width/n;
    const h = size.height/m;
    const l = 10; 
   
    const mask = 0xffffffff;
    const seed = 5;
    let m_w  = (123456789 + seed) & mask;
    let m_z  = (987654321 - seed) & mask;
    let random =  function() {
      m_z = (36969 * (m_z & 65535) + (m_z >>> 16)) & mask;
      m_w = (18000 * (m_w & 65535) + (m_w >>> 16)) & mask;

      var result = ((m_z << 16) + (m_w & 65535)) >>> 0;
      result /= 4294967296;
      return result;
    }
    
    for(var i=0;i<n;i++) {
       for(var j=0;j<m;j++) {
         ctx.fillStyle = 'rgba(0,0,0,'+((random()*(l-1) + 1) - (1-o)*l)+')';
         ctx.fillRect(i*w-.5, j*h-.5, w+.5, h+.5);
        }
      }
  }

})