html - CSS Thumbnail no subtitle - 只有在显示放大的缩略图时才有字幕

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>

我查看了 figcaption，但只能将副标题直接放在缩略图下方。但是我不想在缩略图下看到字幕。

有什么办法吗？

Answer 1

刚刚尝试过这个可能会有帮助。

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>

只是播放可点击的图像以在点击时放大并显示文本。试一试，看看您是否能得到想要的结果。