Hover effect, waves effect and shadows


Step 1

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

Let's create two .rows with three 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 the class .img-fluid 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 a subtle hover effect to our image and a typical for Material Design waves effect on clicking, together with a shadow.

Replace the image with the code below:



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

    

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

MDB adds by default a waves-effect to each .view, .btn and navbar elements.

To learn more about Waves Effect read out Waves Effect Docs.

By adding .z-depth-1-half class we can add a typical Material Design shadow to any element.

If you want you can easily change the depth of the shadow. To learn more about shadows read our Shadows Docs

We also wrap .mask element within <a> (which stands for a link ) element, because we want to redirect the user if he clicks any of the images.

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

Add the 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 the Hover Effects Docs.

Step 4

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



<!--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 class="view overlay z-depth-1-half">
        <img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" class="img-fluid">
        <a href="#!">
          <div class="mask rgba-white-slight"></div>
        </a>
      </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">
        <a href="#!">
          <div class="mask rgba-white-slight"></div>
        </a>
      </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/50.jpg" class="img-fluid">
        <a href="#!">
          <div class="mask rgba-white-slight"></div>
        </a>
      </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/51.jpg" class="img-fluid">
        <a href="#!">
          <div class="mask rgba-white-slight"></div>
        </a>
      </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/52.jpg" class="img-fluid">
        <a href="#!">
          <div class="mask rgba-white-slight"></div>
        </a>
      </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/53.jpg" class="img-fluid">
        <a href="#!">
          <div class="mask rgba-white-slight"></div>
        </a>
      </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 add an URL address to the links.



<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>

    

Rate this lesson

Previous lesson Live preview Next lesson

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

About the 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