Overlay

Basic examples:

Light overlay

Strong overlay

Super light overlay

               <div class="view overlay hm-blue-light">
                    <img src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-1.jpg" class="img-responsive" alt="">
                    <div class="mask">
                        <div class="verticalcenter">
                            <p class="white-text text-center">Light overlay</p>
                        </div>
                    </div>
                </div>
                
                 <div class="view overlay hm-red-strong">
                    <img src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-1.jpg" class="img-responsive" alt="">
                    <div class="mask">
                        <div class="verticalcenter">
                            <p class="white-text text-center">Strong overlay</p>
                        </div>
                    </div>
                </div>
                
                 <div class="view overlay hm-green-slight">
                    <img src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-1.jpg" class="img-responsive" alt="">
                    <div class="mask">
                        <div class="verticalcenter">
                            <p class="white-text text-center">Super light overlay</p>
                        </div>
                    </div>
                </div>
                

Changing colors and intensity

You can change the color and intensity of everaly by using one of the following classes:

Ligh overlay

.hm-blue-light

.hm-red-light

.hm-pink-light

.hm-purple-light

.hm-indigo-light

.hm-cyan-light

.hm-teal-light

.hm-green-light

.hm-lime-light

.hm-yellow-light

.hm-orange-light

.hm-brown-light

.hm-grey-light

.hm-bluegrey-light

.hm-black-light

.hm-stylish-light

.hm-white-light

Strong overlay

.hm-blue-strong

.hm-red-strong

.hm-pink-strong

.hm-purple-strong

.hm-indigo-strong

.hm-cyan-strong

.hm-teal-strong

.hm-green-strong

.hm-lime-strong

.hm-yellow-strong

.hm-orange-strong

.hm-brown-strong

.hm-grey-strong

.hm-bluegrey-strong

.hm-black-strong

.hm-stylish-strong

.hm-white-strong

Super Light overlay

.hm-blue-slight

.hm-red-slight

.hm-pink-slight

.hm-purple-slight

.hm-indigo-slight

.hm-cyan-slight

.hm-teal-slight

.hm-green-slight

.hm-lime-light

.hm-yellow-slight

.hm-orange-slight

.hm-brown-slight

.hm-grey-slight

.hm-bluegrey-slight

.hm-black-slight

.hm-stylish-slight

.hm-white-slight

Zoom effect

Zoom effect

              <div class="view overlay hm-zoom">
                    <img src="https://mdbootstrap.com/wp-content/uploads/2015/10/lbgallery-1.jpg" class="img-responsive" alt="">
                    <div class="mask">
                        <div class="verticalcenter">
                            <p class="white-text text-center">Zoom effect</p>
                        </div>
                    </div>
                </div>

Shadow Hover effect

Add class hoverable to any element to achieve shadow hover effect

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.

This is a link

<img src="example.img" class="hoverable">