Миниатюра CSS без субтитров - субтитры только при отображении увеличенного эскиза - PullRequest
Новая
       87

Миниатюра CSS без субтитров - субтитры только при отображении увеличенного эскиза

0 голосов
/ 21 ноября 2019

Я работаю над страницей 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, но смог разместить субтитры только под миниатюрой. Однако я не хочу видеть субтитры под миниатюрой.

Есть идеи, как это сделать?

1 Ответ

1 голос
/ 22 ноября 2019

Просто поиграйте с этим, это может помочь.

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>

просто играю с кликабельными изображениями, чтобы увеличить их при нажатии и отобразить текст. сыграйте и посмотрите, сможете ли вы получить результат, к которому вы стремитесь.

...