Картинка как кнопка в данном случае

const MP3_URL = 'https://moosic.my.mail.ru/file/5a38b167bc1c86b7d83d1d1577b49ace.mp3';
 document.addEventListener('DOMContentLoaded', () => {
            // Для печати стихотворения
            const printText = () => {
                var textNodes = [];
                var textNodes_data = [];
                var i = 0;
 
                function search_textNodes(b) {
                    b = b.childNodes;
                    for (var c = 0, d = b.length; c < d; c++) {
                        var a = b[c];
                        if (a.nodeType == 3) {
                            textNodes.push(a);
                            textNodes_data.push(a.data);
                            a.data = ""
                        } else a.hasChildNodes() && search_textNodes(a)
                    }
                };
 
                var d = document.getElementById('test');
                search_textNodes(d);
 
                (function() {
                    var a = textNodes_data[i];
                    if (a) {
                        textNodes[i].data += a.charAt(0);
                        textNodes_data[i] = a.substr(1)
                    } else i++;
                    i < textNodes.length && setTimeout(arguments.callee, 160)
                })();
            }
 
            // Загрузка аудио и начало работы
            const audio = new Audio();
 
            const play = () => {
                audio.play().catch(e => {
                    alert(e.message);
                });
            };
 
            audio.addEventListener('canplaythrough', () => {
                const button = document.querySelector('.overlay button');
                if (!button) {
                    return;
                }
 
                button.textContent = 'Нажми на меня';
                button.disabled = false;
 
                button.addEventListener('click', () => {
                    document.querySelector('.overlay')?.remove();
 
                    audio.muted = false;
                    audio.loop = true;
                    audio.volume = 1; // 0..1
 
                    play();
                    printText();
                }, {
                    once: true
                });
            });
 
            audio.addEventListener('error', () => {
                alert(audio.error?.message ?? 'Something went wrong');
            });
 
            audio.src = MP3_URL;
        });

body {
      margin: 0;
    }
.container {

  width: 100%;
  margin: 0 auto;
  max-width: 1064px;
}

.image-stack::after {
    content: ' ';
    display: table;
    clear: both;
  }
  

#test {
      float: left;         
      z-index: 5; 
  }

.voda {
      float: left;         
      z-index: 1; 
  }

.prud {
      float: left;         
      z-index: 1;
  }


.overlay {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            z-index: 10;
        }

button {
            width: 160px;
            height: 60px;
            background-color: #3498db;
            border: 2px solid #2980b9;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@supports (display: grid) {
.image-stack {
    display: grid;
    position: relative; // необходимо, чтобы перекрытие работало
    grid-template-columns: repeat(12, 1fr);
  }

  .voda {
 width: 1064px;
height: 310px;
grid-column: 4 / -1;
grid-row: 1; 
margin-top: 20em;
margin-left: 0em;  
  }
  
  .prud {
grid-column: 4 / -1;
grid-row: 1; 
margin-top: 6.2em;
margin-left: 0em;  
  }

    
#test { 
width: 32vw;
height: 25vw;
position: absolute; 
top: 0;
left: -27em;
top: 10em;
right: 0;
margin: auto;

text-align: left;
  color: white;
  font:  500 30px/1.5 'Syncopate', sans-serif;
  font-style: italic;

  text-shadow: 
    0 1px 0 #ccc, 
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px   rgba(0,0,0, 0.10),
        0 0px 5px   rgba(0,0,0, 0.10),
        0 1px 3px   rgba(0,0,0, 0.30),
        0 3px 5px   rgba(0,0,0, 0.20),
        0 5px 10px  rgba(0,0,0, 0.25),
        0 10px 10px rgba(0,0,0, 0.20),
        0 20px 20px rgba(0,0,0, 0.15);
 
 font-size: 2vw; }

<div class="overlay">
        <button type="button" disabled>
            Загрузка...
        </button>
    </div>

<div class="container">
  <div class="image-stack">

<img class="voda"
src="https://habrastorage.org/webt/7j/je/y1/7jjey1uhale7vcbfunz0hxqkfhu.gif" alt=""/>

<img class="prud"
src="https://habrastorage.org/webt/jo/kw/fh/jokwfh82qe5ugijblckqgdrg-kw.png" alt=""/>
</div>
  
  <div id="test">
С днём рождения, Андрюха !<br>
Дорогой наш рыбачок,<br>
Пусть всегда, без промедления,<br>
Рыбка дёргает крючок.<br>
Чтобы ты её, родную, <br>
Не ждал полдня на берегу, <br>
А ловил её большую, <br>
В море, в речке и в пруду ! <br>
</div> 
  
 </div>