Lightbox

<div class="light-gallery-wrapper">
  
  <figure class="overlay overlay1 hover-scale rounded">
    <a href="#" class="lightbox">
      <img src="./assets/img/photos/p1.jpg" alt="" />
    </a>
    <!--/.lightbox -->
    <figcaption>
      <h5 class="from-top mb-0">View Larger</h5>
    </figcaption>
    <!--/figcaption -->
  </figure>
  <!--/figure -->

  <figure class="overlay overlay1 hover-scale rounded">
    <a href="#" class="lightbox" data-sub-html=".caption"> 
      <img src="./assets/img/photos/p2.jpg" alt="" />
    </a>
    <!--/.lightbox -->
    <figcaption>
      <h5 class="from-top mb-0">Caption</h5>
    </figcaption>
    <!--/figcaption -->
  </figure>
  <!--/figure -->
  <div class="caption d-none">
    <h5>Heading</h5>
    <p>Purus Vulputate Sem Tellus Quam</p>
  </div>
  <!--/.caption -->
  
</div>
<!--/.light-gallery-wrapper -->