CSS 缩略图无字幕 - 仅在显示放大缩略图时提供字幕

Question

我正在处理一个杰基尔页面。

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

我想显示图像的副标题，但仅在单击缩略图时，即显示放大的图像时。理想情况下，它将具有半不透明的背景，字体颜色为白色。

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

只需使用可点击的图像来放大点击并显示文本。 玩一玩，看看你是否能得到你想要的结果。