Landing page – lesson 5


Step 1

We'll use grid to present a few outstanding pictures in our "Examples" section.

Let's create 2 .rows with 3 columns within.


<!--Section: Examples-->
<section id="examples" class="text-center">
    
    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-4">

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-4">

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Section: Examples-->
                            

Step 2

Inside the first column place an image and add responsiveness to it.


<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
    
    <img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" class="img-fluid" alt="">

</div>
<!--Grid column-->
                            

Step 3

Now we'll add subtle hover effect to our image and typical for Material Design waves effect on click, together with shadow.

Wrap your image within .view overlay and .z-depth-1-half classes.


<div class="view overlay z-depth-1-half">
    <img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" class="img-fluid" alt="">
    <div class="mask"></div>
</div>
                            

After saving and refreshing your browser you click on the image. You will notice beautiful and smooth waves effect.

MDB adds from default waves-effect to each .view, .btn and Navbar elements.

But what about hover effect? Well, thanks to MDB it's child's play.

Add class .rgba-white-slight to the .mask element and it's done!


<div class="mask rgba-white-slight">
                            

To learn more about Hover Effects have a look at Hover Effects Docs.

Step 4

To finish "Examples" section we just need to add section heading and heading together with description to our image. Then we can duplicate our component to each column.


<!--Section: Examples-->
<section id="examples" class="text-center">

    <!-- Heading -->
    <h2 class="mb-5 font-weight-bold">Stunning Examples</h2>

    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-4">

            <div class="view overlay z-depth-1-half">
                <img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" class="img-fluid" alt="">
                <div class="mask rgba-white-slight"></div>
            </div>

            <h4 class="my-4 font-weight-bold">Heading</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
                assumenda deleniti hic.</p>

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

            <div class="view overlay z-depth-1-half">
                <img src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" class="img-fluid" alt="">
                <div class="mask rgba-white-slight"></div>
            </div>

            <h4 class="my-4 font-weight-bold">Heading</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
                assumenda deleniti hic.</p>

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

            <div class="view overlay z-depth-1-half">
                <img src="https://mdbootstrap.com/img/Photos/Others/images/29.jpg" class="img-fluid" alt="">
                <div class="mask rgba-white-slight"></div>
            </div>

            <h4 class="my-4 font-weight-bold">Heading</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
                assumenda deleniti hic.</p>

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-4">

            <div class="view overlay z-depth-1-half">
                <img src="https://mdbootstrap.com/img/Photos/Others/images/10.jpg" class="img-fluid" alt="">
                <div class="mask rgba-white-slight"></div>
            </div>

            <h4 class="my-4 font-weight-bold">Heading</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
                assumenda deleniti hic.</p>

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

            <div class="view overlay z-depth-1-half">
                <img src="https://mdbootstrap.com/img/Photos/Others/images/11.jpg" class="img-fluid" alt="">
                <div class="mask rgba-white-slight"></div>
            </div>

            <h4 class="my-4 font-weight-bold">Heading</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
                assumenda deleniti hic.</p>

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

            <div class="view overlay z-depth-1-half">
                <img src="https://mdbootstrap.com/img/Photos/Others/images/13.jpg" class="img-fluid" alt="">
                <div class="mask rgba-white-slight"></div>
            </div>

            <h4 class="my-4 font-weight-bold">Heading</h4>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima
                assumenda deleniti hic.</p>

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Section: Examples-->
                            

Note: If you want to set a redirection after clicking image, you need to wrap .mask element withing an a element.


<div class="view overlay z-depth-1-half">
    <img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" class="img-fluid" alt="">
    <a href="https://mdbootstrap.com/bootstrap-tutorial/">
        <div class="mask rgba-white-slight"></div>
    </a>
</div>            
                            

Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits