Vorrei creare un effetto apparentemente semplice da realizzare:

Ho un titolo <h1> che in parte sormonta una foto
vorrei fare in modo che le lettere del titolo <h1> che sormontano la foto da nere diventino bianche

ovviamente sia il titolo che la foto sono dinamici per cui potrebbero cambiare all'occorrenza.

Ho provato senza successo con: mix-blend-mode: difference;

provo ad allegare il codice attuale che non da perfettamente l'effetto desiderato

codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testo a constrasto</title>
<style type="text/css">
    
.photo {
    position: absolute;
    top: 0;
    left: 150px;
    width: 600px;
    height: 600px;
    z-index: 0;
}
    
.title {
    mix-blend-mode: difference;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: white;
    background-clip: text;
    -webkit-background-clip: text;
    color: black;
}


    
</style>
</head>


<body>
    <h1 class="title">SCARICA LE NOSTRE<br>BROCHURE</h1>
    <img src="https://media.adeo.com/marketplace/LMIT/36603000/236129.jpeg" alt="Foto" class="photo">
</body>
</html>