Image gallery with input checked by CSS-CodePudding

I want to use this pen as basis for an image gallery with a image get centered and bigger when clicked, using only CSS. Basically, here some excerpts of the code.

    <input class='gallery__select' type='radio' name='gallery-select' id='0' checked='checked' />


    <div class='gallery'>
      <label class='gallery__item' for='0'><img src='urlXXX'/></label>
    </div>

.gallery__item {
  cursor: pointer;
  border-radius: 5px;
  grid-row: span 1;
  grid-column: span 1;
  transition: transform 0.1s ease-in-out;
}


.gallery__select:nth-of-type(1):checked ~ .gallery .gallery__item:nth-of-type(1) {
  cursor: default;
  display: grid;
  align-items: center;
  grid-row: 1/-1;
  grid-column: 3;
}

I wondering how I can add a caption only in the centered image (the checked one), but be hidden for the smallest ones. I'm unable to find the good selector for the to achieve this behavior (or any other solution).

 <div class='gallery'>
      <label class='gallery__item' for='0'><img src='urlXXX'/></label>
      <span>text</span>
    </div>

CodePudding user response：

You can add a data-attr (e.g. data-caption) to the label element and show it when the input is checked, like so:

<label class='gallery__item' for='0' data-caption="Some caption">
  <img src='urlXXX'/>
</label>

.gallery__select:checked ~ .gallery .gallery__item::after {
    content: attr(data-caption);
}