title: CSS Thumbnail no subtitle - subtitle only when showing enlarged thumbnail
body: <p>I am working on a jekyll page. </p>
  
  <p>On the page in question I have a series of pictures that I would like to show.</p>
  
  <p>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.</p>
  
  <pre><code>  &lt;div class="row"&gt;
                      &lt;div class="col-xl-6 Keyfeature-selection pt-10 pb-40"&gt;
                          &lt;div class="s-details-img mb-30"&gt;
                            &lt;a href="{{relative_url}}/assets/img/service/details/01.jpg"&gt;
                              &lt;img src="{{relative_url}}/assets/img/service/details/01.jpg" alt=""&gt;
                            &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-xl-6 col-lg-12 service-details"&gt;
                          &lt;div class="s-details-img mb-30"&gt;
                              &lt;h3&gt; Intuitive QGIS Interface
                             &lt;/h3&gt;
                             &lt;p&gt; The software can be used through the famous QGIS interface, making digitizing and layer creating easy and straight-forward
                             &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Any ideas how to do that?</p>