JSFiddle - React, Tailwind, and code Playground

HTML

Use case: an extension to the (5) using checkbox. Click to show the image

<div class="container">
  <label><input type="radio" name="c" ><img src="https://picsum.photos/id/1069/800/800"></label>
  <label><input type="radio" name="c"><img src="https://picsum.photos/id/1012/800/800"></label>
  <label><input type="radio" name="c"><img src="https://picsum.photos/id/106/800/800"></label>
  <label><input type="radio" name="c"><img src="https://picsum.photos/id/107/800/800"></label>
  <label><input type="radio" name="c"><img src="https://picsum.photos/id/1023/800/800"></label>
</div>

CSS

.container {
  display:grid;
  height:300px;
  border:2px solid;
  grid-template-columns:repeat(5,50px);
  grid-template-rows:50px;
  grid-gap:50px;
  position:relative;
  justify-content: center;
  z-index:0;
  counter-reset:num;
}

.container label {
    outline:1px solid;
    cursor:pointer;
    font-size:40px;
    font-weight:bold;
    background:rgba(0,0,0,0.2);
}
.container label::before {
  content:counter(num);
  counter-increment:num;
}
.container label img {
  position:absolute;
  z-index:-1;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:0.5s;
  pointer-events:none;
}
.container label input:checked + img {
  opacity:1;
}

input {
  opacity:0;
}