CSS缩略图没有字幕-只有当显示放大的缩略图时才有字幕

Question

我正在做一个jekyll页面。

在这个页面上，我有一系列我想展示的图片。

我想显示一个图片的字幕，但只有当点击缩略图，即当放大的图像显示。理想情况下，它将有一个半不透明的背景和字体颜色将白色。

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

我看了看附图，但只能把副标题直接放在缩略图下面。但是我不想看到缩略图下面的副标题。

有什么办法吗？

Answer 1

只是在玩这个也许会有帮助。

码页

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

只需播放可点击的图片就可以放大点击并显示文本。玩一玩，看看你能不能得到你想要的结果。