JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
Your great Image!
</h1>
<div class="toggleImage" aria-checked="false">
<button>
</button>
<figure>
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Patent-Motorwagen_Nr.1_Benz_2.jpg"
       height="300" alt="Benz Patentmotorwagen">
       <figcaption><a href="https://de.wikipedia.org/wiki/Automobil#/media/File:Patent-Motorwagen_Nr.1_Benz_2.jpg">Benz Motorwagen Nr. 1 (Wikipedia)</a></figcaption>
</figure>
</div>
<h1>
Another Fine Mess
</h1>

CSS

.toggleImage {
  display: flex;
}
.toggleImage button {
  flex: 0 0 3em;
  position: relative;
  height: 3em;
}
.toggleImage figure {
  flex: 1 0 auto;
  display:none;
}
.toggleImage[aria-checked=true] figure {
  display:block;
}
.toggleImage[aria-checked=true] button::before {
  content: "\2713";
  position: absolute; top: -0.5em; left: 0;
  font-size: 4em;
}
.toggleImage[aria-checked] button::after {
  content: "OFF";
  position: absolute;
  top: 3em; left: 0em;
  width: 3em; text-align:center;
}
.toggleImage[aria-checked=true] button::after {
  content: "ON";
}

JavaScript

document.addEventListener("click", function(e) {
  let btn = e.target;
  if (btn.tagName != "BUTTON") return;
    
  let tgl = btn.closest(".toggleImage");
  let ch = (tgl.getAttribute('aria-checked') == "false") ? "true" : "false";
  tgl.setAttribute('aria-checked', ch);
})