CSS Thumbnail no subtitle - subtitle only when showing enlarged thumbnail

I am working on a jekyll page.

On the page in question I have a series of pictures that I would like to show.

I would like to show a subtitle of an image but only when clicking on the thumbnail i.e. when the enlarged image is shown. Ideally it would have a semi-opaque background and the font-color would be white.

  <div class="row">
                    <div class="col-xl-6 Keyfeature-selection pt-10 pb-40">
                        <div class="s-details-img mb-30">
                          <a href="{{relative_url}}/assets/img/service/details/01.jpg">
                            <img src="{{relative_url}}/assets/img/service/details/01.jpg" alt="">
                          </a>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-12 service-details">
                        <div class="s-details-img mb-30">
                            <h3> Intuitive QGIS Interface
                           </h3>
                           <p> The software can be used through the famous QGIS interface, making digitizing and layer creating easy and straight-forward
                           </p>
                        </div>
                    </div>
                </div>

I looked at figcaption but was only able to put the subtitle directly below the thumbnail. However I do not want to see the subtitle under the thumbnail.

Any ideas how to do that?

Solution

Just been playing around with this it might help.

codepen

    <a class="lightbox" href="#dog">
   <img src="https://i.huffpost.com/gen/749263/original.jpg"/>
</a> 
<div class="lightbox-target" id="dog">
  <figure>
   <img src="https://i.huffpost.com/gen/749263/original.jpg"/>
    <figcaption>add text here</figcaption>
  </figure>
   <a class="lightbox-close" href="#"></a>
</div>

just playing with clickable images to enlarge on click and display text. have a play and see if you can get the outcome you're after.