JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imagem" tabindex="1">
  <h1>Abrir imagem 1</h1>
  <img src="http://lorempixel.com/image_output/city-q-g-1004-804-7.jpg" alt="imagem">
</div>

<div class="imagem" tabindex="2">
  <h1>Abrir imagem 2</h1>
  <img src="http://lorempixel.com/image_output/city-q-g-1004-804-7.jpg" alt="imagem">
</div>

CSS

.imagem > * + * {
  display: none;
}

.imagem > * {
  cursor: pointer;
}

.imagem:focus {
  outline: none;
}

.imagem:focus > * + * {
  display: block;
}