{Theme} comes with Magnific popup gallery.
Magnific Popup
To use ajax gallery with Magnific popup, please use the following HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="row ct-gallery"> <div class="col-sm-6 col-md-4 ct-u-paddingBottom50 ct-js-magnificPortfolioPopupGroup"> <a href="galleryajax.html" title="Tailoring a men's shirt"> <figure class="ct-hover ct-hover-type5"> <img src="../assets/images/tailor/demo-content/examples-1.jpg" alt=""> <figcaption> <h2>We make it with passion.</h2> </figcaption> </figure> </a> </div> <div class="col-sm-6 col-md-4 ct-u-paddingBottom50 ct-js-magnificPortfolioPopupGroup"> <a href="galleryajax2.html" title="Tailoring a men's shirt"> <figure class="ct-hover ct-hover-type5"> <img src="../assets/images/tailor/demo-content/examples-4.jpg" alt=""> <figcaption> <h2>We make it with passion.</h2> </figcaption> </figure> </a> </div> </div> |
You can use one 15 hover types:
Check hovers demo here.
You can change hover effects with the following CSS classes:
- .ct-hover-type1,
- .ct-hover-type2,
- .ct-hover-type3,
- .ct-hover-type4,
- .ct-hover-type5,
- .ct-hover-type6,
- .ct-hover-type7,
- .ct-hover-type8,
- .ct-hover-type9,
- .ct-hover-type10,
- .ct-hover-type11,
- .ct-hover-type12,
- .ct-hover-type13,
- .ct-hover-type14,
- .ct-hover-type15