<div class="container my-5">

​

  <!-- Section: Block Content -->

  <section>

    <style>

      .rgba-black-gradient {

        background: linear-gradient(to top, rgba(0,0,0,.8) 55%,rgba(0,0,0,0) 100%);

      }

    </style>

​

    <!-- Grid row -->

    <div class="row">

​

      <!-- Grid column -->

      <div class="col-12">

​

        <div class="view zoom z-depth-1 rounded mb-4">

          <a href="#!">

            <img src="https://mdbootstrap.com/img/Photos/Others/product1.jpg" class="img-fluid" alt="sample image">

            <div class="mask rgba-black-gradient d-md-flex align-items-end">

              <div class="text-bottom white-text p-4">

                <span class="badge badge-danger">bestseller</span>

                <h3 class="card-title font-weight-bold mt-2 mb-1">This is news title</h3>

                <p class="font-weight-normal mb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

                <button class="btn btn-danger btn-sm btn-rounded mx-0 mb-0 d-none d-sm-inline-block">Read more</button>

              </div>

            </div>

          </a>

        </div>

​

      </div>

      <!-- Grid column -->

    </div>

    <!-- Grid row -->

​

  </section>

  <!-- Section: Block Content -->

​

</div>