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

Question

我正在开发一个 jekyll 页面。

在相关页面上，我想展示一系列图片。

我想显示图像的副标题，但只有在单击缩略图时，即显示放大图像时才显示。理想情况下，它应该有 semi-opaque 背景，font-color 应该是白色。

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

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

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

CSS Thumbnail no subtitle - subtitle only when showing enlarged thumbnail

html

css

image

thumbnails

subtitle