Portfolio Premium component

 
         <div class="tiled-gallery portfolio">
            <div class="row no-gutter">
                <div class="col-md-12">
                    <div class="col-md-6 wow fadeInUp">
                        <div class="tile tile-1 view overlay hm-blue-light z-depth-2"><a class="waves-effect waves-light"><h5 class="title">Category 1</h5><div class="mask"></div></a></div>
                    </div>

                    <div class="col-md-3 wow fadeInUp" data-wow-delay="0.2s">
                        <div class="tile tile-2 view overlay hm-blue-light z-depth-2"><a class="waves-effect waves-light"><h5 class="title">Category 2</h5><div class="mask"></div></a></div>
                    </div>

                    <div class="col-md-3 wow fadeInUp" data-wow-delay="0.4s">
                        <div class="tile tile-3 view overlay hm-blue-light z-depth-2"><a class="waves-effect waves-light"><h5 class="title">Category 3</h5><div class="mask"></div></a></div>
                    </div>

                    <div class="col-md-3 wow fadeInUp">
                        <div class="tile tile-4 view overlay hm-blue-light z-depth-2"><a class="waves-effect waves-light"><h5 class="title">Category 4</h5><div class="mask"></div></a></div>
                    </div>

                    <div class="col-md-6 wow fadeInUp" data-wow-delay="0.2s">
                        <div class="tile tile-5 view overlay hm-blue-light z-depth-2"><a class="waves-effect waves-light"><h5 class="title">Category 5</h5><div class="mask"></div></a></div>
                    </div>

                    <div class="col-md-3 wow fadeInUp" data-wow-delay="0.4s">
                        <div class="tile tile-6 view overlay hm-blue-light z-depth-2"><a class="waves-effect waves-light"><h5 class="title">Category 6</h5><div class="mask"></div></a></div>
                    </div>

                    <div class="col-md-3 wow fadeInUp">
                        <div class="tile tile-7 view overlay hm-blue-light z-depth-2"><a class="waves-effect waves-light"><h5 class="title">Category 7</h5><div class="mask"></div></a></div>
                    </div>

                    <div class="col-md-3 wow fadeInUp" data-wow-delay="0.2s">
                        <div class="tile tile-8 view overlay hm-blue-light z-depth-2"><a class="waves-effect waves-light"><h5 class="title">Category 8</h5><div class="mask"></div></a></div>
                    </div>

                    <div class="col-md-6 wow fadeInUp" data-wow-delay="0.4s">
                        <div class="tile tile-9 view overlay hm-blue-light z-depth-2"><a class="waves-effect waves-light"><h5 class="title">Category 9</h5><div class="mask"></div></a></div>
                    </div>

                </div>
            </div>
        </div>
        

Changing the background

 
            .portfolio .tile-1 {
                background-image: url(https://mdbootstrap.com/wp-content/uploads/2015/10/kfi5dark.jpg);
            }
            
            .portfolio .tile-2 {
                background-image: url(https://mdbootstrap.com/wp-content/uploads/2015/10/kfi3dark.jpg);  
            }
            
            etc. (.tile-3, .tile-4 ... .tile-9)
        
        

Elegant Gallery Premium component

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Learn more

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Learn more

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Learn more

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Learn more

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Learn more

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Learn more

 
  <!--Elegant Gallery-->
<div class="elegant-gallery">
    <!--First row-->
    <div class="row">
        <div class="col-md-12 no-gutter">

            <!--First Card-->
            <div class="col-md-4 no-padding z-depth-1">
                <div class="view overlay hm-blue-light">
                    <img src="https://mdbootstrap.com/images/reg/reg%20(11).jpg" class="img-responsive" alt="">
                    <div class="mask waves-effect"></div>
                </div>
                <div class="card-content elegant-color white-text">
                    <h4>Card title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime. </p>
                    <a href="#" class="white-text"><h5>Learn more <i class="fa fa-chevron-right"></i></h5></a>
                </div>
            </div>
            <!--/.First Card-->

            <!--Second Card-->
            <div class="col-md-4 no-padding z-depth-1">
                <div class="view overlay hm-blue-light">
                    <img src="https://mdbootstrap.com/images/reg/reg%20(1).jpg" class="img-responsive" alt="">
                    <div class="mask waves-effect"></div>
                </div>
                <div class="card-content">
                    <h4>Card title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime. </p>
                    <a href="#" class="black-text"><h5>Learn more <i class="fa fa-chevron-right"></i></h5></a>
                </div>
            </div>
            <!--/.Second Card-->

            <!--Third Card-->
            <div class="col-md-4 no-padding z-depth-1">
                <div class="view overlay hm-blue-light">
                    <img src="https://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive" alt="">
                    <div class="mask waves-effect"></div>
                </div>
                <div class="card-content elegant-color white-text">
                    <h4>Card title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime. </p>
                    <a href="#" class="white-text"><h5>Learn more <i class="fa fa-chevron-right"></i></h5></a>
                </div>
            </div>
            <!--/.Third Card-->
        </div>
    </div>
    <!--/.First row-->

    <!--First row-->
    <div class="row">
        <div class="col-md-12 no-gutter">

            <!--First Card-->
            <div class="col-md-4 no-padding z-depth-1">
                <div class="view overlay hm-blue-light">
                    <img src="https://mdbootstrap.com/images/reg/reg%20(3).jpg" class="img-responsive" alt="">
                    <div class="mask waves-effect"></div>
                </div>
                <div class="card-content">
                    <h4>Card title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime. </p>
                    <a href="#" class="black-text"><h5>Learn more <i class="fa fa-chevron-right"></i></h5></a>
                </div>
            </div>
            <!--/.First Card-->

            <!--Second Card-->
            <div class="col-md-4 no-padding z-depth-1">
                <div class="view overlay hm-blue-light">
                    <img src="https://mdbootstrap.com/images/reg/reg%20(5).jpg" class="img-responsive" alt="">
                    <div class="mask waves-effect"></div>
                </div>
                <div class="card-content elegant-color white-text">
                    <h4>Card title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime. </p>
                    <a href="#" class="white-text"><h5>Learn more <i class="fa fa-chevron-right"></i></h5></a>
                </div>
            </div>
            <!--/.Second Card-->

            <!--Third Card-->
            <div class="col-md-4 no-padding z-depth-1">
                <div class="view overlay hm-blue-light">
                    <img src="https://mdbootstrap.com/images/reg/reg%20(15).jpg" class="img-responsive" alt="">
                    <div class="mask waves-effect"></div>
                </div>
                <div class="card-content">
                    <h4>Card title</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime. </p>
                    <a href="#" class="black-text"><h5>Learn more <i class="fa fa-chevron-right"></i></h5></a>
                </div>
            </div>
            <!--/.Third Card-->
        </div>
    </div>
    <!--/.First row-->
</div>
<!--/.Elegant Gallery-->
        

Light Box Gallery Premium component