#example {
    background-repeat: repeat-x;    
    margin-left: 20px;
    margin-top: 13px;
}

#example .but1{    
   
    line-height: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right:0px;
    display:inline-block;
    position:relative;
}

#example .but1 h3 {
    position:absolute;
    top: 20px;
    left: 20px;
}

#example .but1 .test1 {
    position:absolute;
    top: 50px;
    left: 20px;
}

<div class="container pt-6">
        <div class="row">
            <div class="col-md-6">
                <div id="example">
                    <div class="card">
                         <div class="but1 view overlay hm-blue-light white-text">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(7).jpg" class="img-fluid " alt="">
                            <h3 class="pb-3">Project title</h3>
                            <p class="test1">Lorem ipsum dolor sit amet.</p>
                            <div class="mask flex-center">
                                <p class="white-text">Light overlay</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Hi Marta,

Here's a sample page:

The central grid on the page (3 cols, 2 rows) have two grey 1:1 squares that I would like to apply the Hover x Overlays to. The MDB documentation is clear for each Hover and Overlay Mask which works great for images, but I would like to achieve the same effects with a combination of text (hover) with text (overlay).

The idea is that there's a DIV block in the grid that has a soft-grey background with a text overlay visible on the page; upon mouseover, there is a dark grey hover mask with a Font Awesome (FA) right-pointing arrow (<i class="fa fa-long-arrow-right" aria-hidden="true"></i>) that appears. The HTML text underneath stays visible under the Hover Mask, much like an image would in the MDB examples.

Here's a code sample:

<!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <div class="view hm-stylish-strong">

                            <!-- LIGHT GREY BACKGROUND square : 320 x 320 px) -->
                            <img src="images/KVW-home-320-1x1.png" class="img-fluid" />
                            <div class="mask flex-container">
                              <p><b>Portfolio</b></p>

                              <!-- Font Awesome Briefcase stack on circle -->
                              <p>
                                <span class="fa-stack fa-lg">
                                  <i class="fa fa-circle fa-stack-2x"></i>
                                  <i class="fa fa-briefcase fa-stack-1x fa-inverse"></i>
                                </span>
                              </p>
                              <p>Sampling of affiliated programs & projects over the years, serving in various capacities
                            </div>
                            <a href="#!">
                              <div class="view overlay">
                                <div class="mask flex-hover-container">
                                  <!-- Font Awesome Arrow-Right Icon -->
                                  <p class="white-text"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></p>
                                </div>
                              </div>
                            </a>
                        </div>
                        <!--/.Card image-->

                    </div>
                    <!--/.Card-->

Thanks!

Eric
Seattle, Washington