Elements
These modular elements can be readily used and customized across pages and in different blocks.
Gallery Default <> show code
<!-- Default Style -->
<div class="card">
<div class="card_img">
<a href="img/home/gallery/g1.jpg" data-fancybox="images">
<img class="img-full" src="img/home/gallery/g1.jpg" />
</a>
</div>
</div>
<!-- With Hover overlay -->
<div class="card">
<div class="card_img">
<a href="img/home/gallery/g1.jpg" data-fancybox="images">
<img class="img-full" src="img/home/gallery/g1.jpg" />
<div class="hover-overlay effect-transformY">
<h4 class="">Image Title Here</h4>
</div>
</a>
</div>
</div>
<!-- With overlay icon -->
<div class="card_img">
<a href="img/home/gallery/g1.jpg" data-fancybox="images">
<img class="img-full" src="img/home/gallery/g1.jpg" />
<div class="hover-overlay effect-transformY overlay-flex">
<i class="overlay-icon fa fa-plus"></i>
<h4 class="">Photo title here</h4>
</div>
</a>
</div>
How to use
- Modal image gallery is designed using Fancybox Jquery plugin. Read the user documentation properly
- You can call fancybox through data- attribute as shown in the code example.
- You can use your own class names to customize style