Below is portfolio pop up gallery code example. Apply popgallery-widget class as display in below code example highlighted line no. 5. It is javascript hook to apply pop up on thumb images.
<!-- Portfolio section --> <section class="portfolio-section portfolio-section-2"> <div class="container"> ... <ul class="rw eq3 mb10 gt10 popgallery-widget"> <li class="cl"> <div class="portfolio-box portfolio-box1"> <div class="overlay"> <a href="images/800x800_1.jpg" title="This is title of image" class="pop-img"><i class="fa fa-search"></i></a> <div class="caption"> <h3 class="hd">Consetetur sadipscing</h3> <p class="txt">Lorem ipsum dolor sit amet</p> </div> </div><!-- /.overlay --> <img src="images/800x800_1.jpg" alt="image" > </div><!-- /.portfolio-box --> </li><!-- /.cl --> <li class="cl"> ... </li><!-- /.cl --> </ul><!-- /.rw --> </div> </section> <!-- / Portfolio section -->
- Set large pop up image path on href=”images/800x800_1.jpg” and title=”…” as display on line no. 10
- Add caption details which display on hover of thumb image as display on line no. 12 & 13
- Set thumb image as display on line no. 16