From fe3bce3398d13e346f0a088f6e46828880d8a5c5 Mon Sep 17 00:00:00 2001
From: REJack <info@rejack.de>
Date: Tue, 24 Nov 2020 09:27:57 +0100
Subject: [PATCH] add card with image overlay demo

---
 pages/widgets.html | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/pages/widgets.html b/pages/widgets.html
index 47a8745ae..959ebc8c5 100644
--- a/pages/widgets.html
+++ b/pages/widgets.html
@@ -3078,6 +3078,52 @@
           <!-- /.col -->
         </div>
         <!-- /.row -->
+
+        <h5 class="mb-2">Card with Image Overlay</h5>
+        <div class="card card-success">
+          <div class="card-body">
+            <div class="row">
+              <div class="col-md-12 col-lg-6 col-xl-4">
+                <div class="card mb-2 bg-gradient-dark">
+                  <img class="card-img-top" src="../dist/img/photo1.png">
+                  <div class="card-img-overlay d-flex flex-column justify-content-end">
+                    <h5 class="card-title text-primary text-white">Card Title</h5>
+                    <p class="card-text text-white pb-2 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
+                    <a href="#" class="text-white">Last update 2 mins ago</a>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-12 col-lg-6 col-xl-4">
+                <div class="card mb-2">
+                  <img class="card-img-top" src="../dist/img/photo2.png">
+                  <div class="card-img-overlay d-flex flex-column justify-content-center">
+                    <h5 class="card-title text-white mt-5 pt-2">Card Title</h5>
+                    <p class="card-text pb-2 pt-1 text-white">
+                      Lorem ipsum dolor sit amet, <br>
+                      consectetur adipisicing elit <br>
+                      sed do eiusmod tempor
+                    </p>
+                    <a href="#" class="text-white">Last update 2 mins ago</a>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-12 col-lg-6 col-xl-4">
+                <div class="card mb-2">
+                  <img class="card-img-top" src="../dist/img/photo3.jpg">
+                  <div class="card-img-overlay">
+                    <h5 class="card-title text-primary">Card Title</h5>
+                    <p class="card-text pb-1 pt-1 text-white">
+                      Lorem ipsum dolor <br>
+                      sit amet, consectetur <br>
+                      adipisicing elit sed <br>
+                      do eiusmod tempor </p>
+                    <a href="#" class="text-primary">Last update 2 mins ago</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div><!-- /.container-fluid -->
     </section>
     <!-- /.content -->