JSFiddle - React, Tailwind, and code Playground

by mauricederegt

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

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

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;
}