Gallery

• Posted: January 8, 2016
• / By: Magda
• / In:

HTML markup

CSS

<section id="gallery" class="ct-gallerySection onepager"> <div class="ct-topContent"> <div data-bg="../assets/images/demo-content/booze/main-picture.jpg" class="ct-imageComponent ct-js-background ct-u-displayTable ct-u-displayTableVertical"> <div class="ct-u-displayTableCell text-center"> <header>Booze Gallery</header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada <br/> fames ac turpis egestas.</p> <ul class="ct-gallery-filters list-unstyled list-inline"> <li><a data-filter="*" class="active">All<span class="rel">All</span></a></li> <li><a data-filter=".rooms">Rooms<span class="rel">Rooms</span></a></li> <li><a data-filter=".drinks">Drinks<span class="rel">Drinks</span></a></li> <li><a data-filter=".food">Foods<span class="rel">Foods</span></a></li> <li><a data-filter=".staff">Staff<span class="rel">Staff</span></a></li> <li><a data-filter=".events">Events<span class="rel">Events</span></a></li> </ul> <div class="clearfix"></div> </div> </div> </div> <div class="ct-bottomContent"> <div id="ct-gallery" class="ct-gallery ct-gallery--col5 ct-js-popupGallery ct-bottomBorder"> <div class="_js-lightGallery"><a href="../assets/images/demo-content/booze/gallery1.jpg" data-sub-html="Sed ut perspiciatis" class="ct-gallery-item ct-gallery-item--masonry hidden drinks grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery1.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">all,</li> <li class="text-uppercase">drinks</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery2.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden rooms grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery2.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">people,</li> <li class="text-uppercase">party</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery3.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden drinks events grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery3.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">&nbsp;</li> <li class="text-uppercase">&nbsp;</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery4.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden events grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery4.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">&nbsp;</li> <li class="text-uppercase">&nbsp;</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery5.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden rooms staff grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery5.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">all,</li> <li class="text-uppercase">people</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery6.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden food grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery6.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">mohito,</li> <li class="text-uppercase">orange juice</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery7.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden drinks grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery7.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">food,</li> <li class="text-uppercase">party</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery8.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden food grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery8.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">party,</li> <li class="text-uppercase">drinks</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery9.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden rooms staff grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery9.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">drinks,</li> <li class="text-uppercase">pizza</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery10.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden staff grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery10.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">&nbsp;</li> <li class="text-uppercase">&nbsp;</li> </ul> </div></a><a href="../assets/images/demo-content/booze/gallery11.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden food grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery11.jpg" alt="Image"> <div class="ct-galleryHover text-center"> <div class="ct-title"><span>THE BEST BLEND</span></div> <ul class="ct-category list-unstyled list-inline"> <li class="text-uppercase">&nbsp;</li> <li class="text-uppercase">&nbsp;</li> </ul> </div></a></div> </div> </div> </section>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

<section id="gallery" class="ct-gallerySection onepager">   <div class="ct-topContent">     <div data-bg="../assets/images/demo-content/booze/main-picture.jpg" class="ct-imageComponent ct-js-background ct-u-displayTable ct-u-displayTableVertical">       <div class="ct-u-displayTableCell text-center">         <header>Booze Gallery</header>         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada <br/> fames ac turpis egestas.</p>         <ul class="ct-gallery-filters list-unstyled list-inline">           <li><a data-filter="*" class="active">All<span class="rel">All</span></a></li>           <li><a data-filter=".rooms">Rooms<span class="rel">Rooms</span></a></li>           <li><a data-filter=".drinks">Drinks<span class="rel">Drinks</span></a></li>           <li><a data-filter=".food">Foods<span class="rel">Foods</span></a></li>           <li><a data-filter=".staff">Staff<span class="rel">Staff</span></a></li>           <li><a data-filter=".events">Events<span class="rel">Events</span></a></li>         </ul>         <div class="clearfix"></div>       </div>     </div>   </div>   <div class="ct-bottomContent">     <div id="ct-gallery" class="ct-gallery ct-gallery--col5 ct-js-popupGallery ct-bottomBorder">       <div class="_js-lightGallery"><a href="../assets/images/demo-content/booze/gallery1.jpg" data-sub-html="Sed ut perspiciatis" class="ct-gallery-item ct-gallery-item--masonry hidden drinks grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery1.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">all,</li>               <li class="text-uppercase">drinks</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery2.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden rooms grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery2.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">people,</li>               <li class="text-uppercase">party</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery3.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden drinks events grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery3.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">&nbsp;</li>               <li class="text-uppercase">&nbsp;</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery4.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden events grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery4.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">&nbsp;</li>               <li class="text-uppercase">&nbsp;</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery5.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden rooms staff grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery5.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">all,</li>               <li class="text-uppercase">people</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery6.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden food grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery6.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">mohito,</li>               <li class="text-uppercase">orange juice</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery7.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden drinks grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery7.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">food,</li>               <li class="text-uppercase">party</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery8.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden food grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery8.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">party,</li>               <li class="text-uppercase">drinks</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery9.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden rooms staff grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery9.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">drinks,</li>               <li class="text-uppercase">pizza</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery10.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden staff grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery10.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">&nbsp;</li>               <li class="text-uppercase">&nbsp;</li>             </ul>           </div></a><a href="../assets/images/demo-content/booze/gallery11.jpg" data-sub-html="Unde omnis iste" class="ct-gallery-item ct-gallery-item--masonry hidden food grayscale grayscale-fade"><img src="../assets/images/demo-content/booze/gallery11.jpg" alt="Image">           <div class="ct-galleryHover text-center">             <div class="ct-title"><span>THE BEST BLEND</span></div>             <ul class="ct-category list-unstyled list-inline">               <li class="text-uppercase">&nbsp;</li>               <li class="text-uppercase">&nbsp;</li>             </ul>           </div></a></div>     </div>   </div> </section>

Screenshot

Gallery example