Overlay Effects

Some examples:

You can check example here, also you can check all overlay effects' video here

Including files

These are all the files you need to import in your page so the plugin can work.

      <link rel="stylesheet" type="text/css" href="../plugin/assets/css/magnific-popup.css" />
      <link rel="stylesheet" type="text/css" href="../plugin/assets/css/animate.min.css" />
      <link rel="stylesheet" type="text/css" href="../plugin/assets/css/imageTiles.css" media="all" />

       <!-- jQuery 1.8+ -->
       <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

       <script src="../plugin/assets/js/imagesloaded.pkgd.min.js"></script>
       <script src="../plugin/assets/js/anime.min.js"></script>
       <script src="../plugin/assets/js/classie.js"></script>
       <script src="../plugin/assets/js/modernizr-custom.js"></script>
       <script src='../plugin/assets/js/isotope.pkgd.min.js'></script>
       <script src="../plugin/assets/js/magnific-popup.min.js"></script>
       <script src="../plugin/assets/js/loadgo.min.js"></script>
       <script src="../plugin/assets/js/jquery.imageTiles.js"></script>

It’s not required, but I recommend placing the CSS files in <head> and the JavaScript files and initialization code in the footer of your site (before the closing </body> tag).

HTML Structure

        <div id="myGrd" class="tiles-grid">
            <div class="tiles-grid-item set1" data-size="1180x787" >
              <a class="tiles-grid-link" href="img/demo/original/6.jpg">
                <figure class="effect-lily">
                   <img class="tiles-grid-img" src="img/demo/6.jpg" alt="Some image" />
                   <div class="tiles-description tiles-description-grid">
                             Image name
                     <figcaption class="hover">
                          <h2>Nice effect 1</h2>
                          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>


The Portfolio Pro included 26 different overlay effects . For using those, you should add class to figure element. For example: <figure class="effect-lily"> . You can find all overlayf effects name in here

Once you got the HTML markup in your site you need to initialize the plugin in Javascript. You need to take the id from the container of the boxes in the HTML (In the example above would be: id="myGrd") and use it for the initialization. You can use 4 image effects : grayscale | invert | sepia | blur. Example : imageEffect:'blur'