Topic: CARDS: View Containers with both Overlay and Hover Text

surface2air free asked 6 years ago

Hi! Great features in the update! I'm stretching my thinking and coding all of the time. I have a question about Card Views and using both Overlay and Hover Text. My set up is this: -- ONE PARENT CARD VIEW stacked with the following ---- (1) View Overlay (image) ---- (2) (HTML TEXT - visible over the View Overlay Image AND visible under the Hover Mask) ---- (3) Mask that is visible upon mouseover on link with Text Hover I can do both (1) and (3) in the same Card View, but cannot seem to integrate (2) into the stack. How can static and styled HTML Text get integrated underneath a Mask Hover and over a View Overlay? Thanks in advance! Eric

Marta Wierzbicka staff answered 6 years ago

Hi, Try this solution and adapt to your needs: CSS:
#example {
    background-repeat: repeat-x;    
    margin-left: 20px;
    margin-top: 13px;

#example .but1{    
    line-height: 0px;
    margin-top: 0px;
    margin-left: 0px;

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

#example .but1 .test1 {
    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="" 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>
Best, Marta

surface2air free answered 6 years ago

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:

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

                              <!-- Font Awesome Briefcase stack on circle -->
                                <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>
                              <p>Sampling of affiliated programs & projects over the years, serving in various capacities
                            <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>
                        <!--/.Card image-->



Seattle, Washington

Marta Wierzbicka staff answered 6 years ago

Hi, send me files with the code you try to my mail:, please. I'll try to help you. Best, Marta

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No