Isotope gallery with popup

HTML MARKUP

&lt;ul class="list-unstyled ct-gallery-filters"&gt;&lt;!-- Isotope nav --&gt;
   &lt;li&gt;&lt;a data-filter="*" class="active"&gt;ALL&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a data-filter=".classical"&gt;CLASSICAL&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a data-filter=".neo-classical"&gt;NEO-CLASSICAL&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a data-filter=".contemporary"&gt;CONTEMPORARY&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;div class="ct-gallery ct-gallery--col3 ct-gallery--withSpacing is-loaded"&gt;
 &lt;div class="ct-gallery-item ct-gallery-item--masonry classical"&gt;&lt;!-- Gallery's 1 item--&gt;
                                &lt;div class="ct-gallery-itemInner"&gt;
                                    &lt;div class="ct-galleryBox ct-galleryBox--type1 ct-galleryBox--motive"&gt;
                                        &lt;a class="ct-js-magnificPopupImage ct-galleryBox ct-galleryBox--type1 ct-galleryBox--motive" href="../assets/images/demo-content/gallery1.jpg"&gt;
                                            &lt;figure&gt;
                                                &lt;img src="../assets/images/demo-content/gallery1.jpg" class="ct-portfolio-image" alt="Gallery picture 1"&gt;
                                                &lt;figcaption class="ct-galleryBox-overlay"&gt;
                                                    &lt;div class="ct-galleryBox-overlay-imageTitle"&gt;
                                                        Orange Ballerina Dancing
                                                    &lt;/div&gt;
                                                    &lt;div class="ct-galleryBox-overlay-imageView"&gt;
                                                        &lt;span&gt;See&lt;/span&gt;
                                                    &lt;/div&gt;
                                                &lt;/figcaption&gt;
                                            &lt;/figure&gt;
                                        &lt;/a&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
&lt;/div&gt;

<li><a data-filter=".classical">CLASSICAL</a></li>

<li><a data-filter=".neo-classical">NEO-CLASSICAL</a></li>

<li><a data-filter=".contemporary">CONTEMPORARY</a></li>

</ul>

Orange Ballerina Dancing

</div>

</div>

</figcaption>

</figure>

</a>

</div>

JavaScript

<script src="../assets/plugins/ct-portfolio/jquery.isotope.min.js"></script>
<script src="../assets/plugins/ct-portfolio/imagesloaded.js"></script>
<script src="../assets/plugins/ct-portfolio/init.js"></script>
<script src="../assets/plugins/magnificPopup/jquery.magnific-popup.js"></script>
<script src="../assets/plugins/magnificPopup/init.js"></script>

Screenshot’s

News

Siver

Estato

Disrupt

We are elite