<header>

​

  <section>

    <div class="bg-image h-100" style="background-image: url(https://mdbootstrap.com/img/Photos/new-templates/glassmorphism-article/img5.jpg); ">

      <div class="mask d-flex align-items-center h-100">

        <div class="container">

          <div class="row justify-content-center text-center">

            <div class="col-lg-8 col-xl-6">

              <div class="card mask-custom py-5 px-4 text-white" data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in" data-mdb-animation-duration="1000" data-mdb-animation-delay="300">

                <div class="card-body">

                  <h2>This is the glassmorphism effect</h2>

                  <p class="lead font-weight-normal my-4">You can use it instead of the standard white card background in the intro of your landing page or portfolio</p>

                  <button type="button" class="btn btn-primary btn-rounded btn-lg">Learn more</button>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

​

</header>