Mobile frontend question: how to display another image upon opening the current one?

My question specifically is: When you view websites on your phone, you can click on an image and open it full-screen right. And I remember seeing people doing tricks like opening it and viewing a different image. I tried learning svg but do not have a clue. This is just some random code I found which does not work:

<section style="height: 0; opacity: 0"></section>
<section style="vertical-align: top; margin-top: -1px;">
  <section style="height: 0;">
    <p>
      <img src="IMAGE AT BOTTOM" style="vertical-align: top;">
    </p>
  </section>
  <section style="pointer-events:auto; transform:scale(1);">
    <svg style="pointer-events:auto; transform:scale(1); display:inline-block;
    width: 100%; vertical-align:top background-position: 0% 0%;
    background-repeat: no-repeat; background-size: 100% 100%; background-attachment: scroll;
    background-image: IMAGE ON TOP);
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none;"
    viewbox="0 0 1000 800" data-Copyright="GL"></svg>
  </section>
</section>