Hello,
This is Definitely Possible!
Consider using the following code:
<div class="masonry-thumbs grid-container grid-4" data-big="4" data-lightbox="gallery">
<!-- Gallery Item 1 -->
<div class="grid-item">
<div class="grid-inner" href="images/portfolio/full/1.jpg">
<img src="images/portfolio/4/1.jpg" alt="Gallery Thumb 1">
<!-- Overlay: Start -->
<div class="bg-overlay">
<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
<a href="images/portfolio/full/1.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-lightbox="image" title="Image"><i class="icon-line-stack"></i></a>
<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="icon-line-ellipsis"></i></a>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
<!-- Overlay: End -->
</div>
</div>
...
</div>
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
