Magnific Popup

• Posted: January 5, 2015
• / By: Julita
• / In:

Static state

Hover state

HTML markup

XHTML

<a href="assets/images/demo-content/portfolio-large-17.jpg" class="ct-js-magnificPopupImage"> <div class="ct-imageOverlay-container"> <div class="ct-imageButton"></div> <div class="ct-imageOverlay"> <div class="ct-imageOverlay-text"> <h3 class="text-center text-uppercase ct-fw-300">LONG FIN</h3> <h3 class="text-center text-uppercase ct-fw-300"><span class="ct-fw-500">ZEBRA DAN</span></h3> <h3 class="text-center text-uppercase ct-fw-300">FISH</h3> </div> </div> <img class="ct-img100" src="assets/images/demo-content/portfolio-small-17.jpg" alt=""> </div> </a>

1 2 3 4 5 6 7 8 9 10 11 12 13

<a href="assets/images/demo-content/portfolio-large-17.jpg" class="ct-js-magnificPopupImage">     <div class="ct-imageOverlay-container">         <div class="ct-imageButton"></div>         <div class="ct-imageOverlay">             <div class="ct-imageOverlay-text">                 <h3 class="text-center text-uppercase ct-fw-300">LONG FIN</h3>                 <h3 class="text-center text-uppercase ct-fw-300"><span class="ct-fw-500">ZEBRA DAN</span></h3>                 <h3 class="text-center text-uppercase ct-fw-300">FISH</h3>             </div>         </div>         <img class="ct-img100" src="assets/images/demo-content/portfolio-small-17.jpg" alt="">     </div> </a>