Use masks to make your content more visible in the picture.

Patterns

no mask

.pattern-1


.pattern-2

.pattern-3


.pattern-4

.pattern-5


.pattern-6

.pattern-7


.pattern-8

.pattern-9



  <div class="view">
        <img src="https://mdbootstrap.com/images/regular/nature/img%20(1).jpg" class="img-responsive" alt="">
        <div class="mask pattern-1">
            <div class="verticalcenter">     
                <p class="white-text text-center">.pattern-1</p>
                </div>
        </div>
    </div>

Overlays

.hm-black-strong


              <div class="view hm-black-strong">
                    <img src="https://mdbootstrap.com/images/regular/nature/img%20(1).jpg" class="img-responsive" alt="">
                    <div class="mask">
                        <div class="verticalcenter">
                            <h4 class="white-text text-center">.pattern-1</h4>
                        </div>
                    </div>
                </div>

You can find full list of available overlays here:

Overlays list