JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <figure class="item">
        <input type="checkbox" id="1" class="box" />
        <label for="1">
            <img src="https://picsum.photos/seed/100/100" />
            <figcaption>Text below the image1</figcaption>
        </label>
    </figure>
   <figure class="item">
        <input type="checkbox" id="2" class="box" />
        <label for="2">
            <img src="https://picsum.photos/seed/100/100" />
            <figcaption>Text below the image1</figcaption>
        </label>
    </figure>
    <figure class="item">
        <input type="checkbox" id="3" class="box" />
        <label for="3">
            <img src="https://picsum.photos/seed/100/100" />
            <figcaption>Text below the image1</figcaption>
        </label>
    </figure>
    <figure class="item">
        <input type="checkbox" id="4" class="box" />
        <label for="4">
            <img src="https://picsum.photos/seed/100/100" />
            <figcaption>Text below the image1</figcaption>
        </label>
    </figure>
</div>

CSS

html, body {
  height: 100%;
}

/* @media (min-width: 600px) { */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2%;
  padding: 1%;
  height: 100%;
  align-items: center;
}

/* } */

figure.item {
  border: 1px solid #000;
  /* To horizontally center images and caption */
  text-align: center;
  margin: 0;
  padding: 0;

}

/* hack to make images flexible: width: 100%;*/
img {
  width: 100%;
}

.caption {
  /* visibility: hidden; */
}

img,
figcaption {
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  opacity: 0.5;
}

:checked+label img,
:checked+label figcaption {
  opacity: 1;
}

input[type=checkbox] {
  display: none;
}