From 192c2af1ec60d62b501e72910f231c1946f0d46a Mon Sep 17 00:00:00 2001
From: Bob Vandevliet <info@bvandevliet.nl>
Date: Fri, 14 Jun 2024 13:57:27 +0200
Subject: [PATCH] Added stock background images to service cards.

---
 public/assets/css/styles.css | 35 +++++++++++++++++++++++++++++++++++
 public/index.html            | 18 ++++++++++--------
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css
index 6cf694b..fb2a78a 100644
--- a/public/assets/css/styles.css
+++ b/public/assets/css/styles.css
@@ -54,4 +54,39 @@ h4:hover .anchor-link,
 h5:hover .anchor-link,
 h6:hover .anchor-link {
   opacity: 1;
+}
+
+.text-shadow {
+  text-shadow:
+    -1px -1px 3px rgba(0, 0, 0, 0.3),
+    -1px 0px 3px rgba(0, 0, 0, 0.3),
+    -1px 1px 3px rgba(0, 0, 0, 0.3),
+    0px -1px 3px rgba(0, 0, 0, 0.3),
+    0px 0px 3px rgba(0, 0, 0, 0.3),
+    0px 1px 3px rgba(0, 0, 0, 0.3),
+    1px -1px 3px rgba(0, 0, 0, 0.3),
+    1px 0px 3px rgba(0, 0, 0, 0.3),
+    1px 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.card-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-img-overlay {
+  position: unset;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  transition: background-color 0.2s;
+}
+
+.card:hover .card-img-overlay {
+  background-color: rgba(0, 0, 0, 0.4);
 }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 09c01b0..618fa89 100644
--- a/public/index.html
+++ b/public/index.html
@@ -38,8 +38,10 @@
       <div class="row text-center">
         <div class="col-lg">
           <div class="card h-100">
-            <!-- <img src="..." class="card-img-top" alt="..."> -->
-            <div class="card-body">
+            <!-- <img src="https://pixabay.com/get/gd7128777282c6130d10cc4a36846b6a7e2ddc5097e97f39515cad627b13aec93756b570f5455b3f2608552932541f97d1b3412dea2d3970116834240881a0ed94862a67cd912d1259efcd0052a3e0a98_640.jpg" class="card-img" alt="..."> -->
+            <!-- <img src="https://pixabay.com/get/g0183f0fc2f0fed51aba6333baa19c213d184bea5865597750397e14d675ca90a69357dc316fb0a19a6889d33943377b207960105291fab749922b6a4c68b84887972d95834f04dfd15a5067d5797837d_640.jpg" class="card-img" alt="..."> -->
+            <img src="https://pixabay.com/get/g48e3d28ff755610c6d1ea9ea5308799b48092bec26afa05445f53209384dcf28693e86f69ffb1800e6d7adbce1f612f33c391a2e11043a108e0589d8fdc0d7808d8ff5ee31eed247d616f6f759f90332_640.jpg" class="card-img" alt="...">
+            <div class="card-img-overlay text-shadow">
               <h4 class="card-title">
                 <i class="fa-solid fa-industry"></i>
                 <br>Bedrijfsvideo
@@ -52,8 +54,8 @@
         </div>
         <div class="col-lg">
           <div class="card h-100">
-            <!-- <img src="..." class="card-img-top" alt="..."> -->
-            <div class="card-body">
+            <img src="https://pixabay.com/get/gab0674333de1b49ad97adf913009e60da1262415f619560a40ba95990c968ac8595fdcd74e38573f1d581e776c5e0e910ec7d830d7c54acae0e61681031611a3c4710d3736ceb5dbdcd6b89386d2ad39_640.jpg" class="card-img" alt="...">
+            <div class="card-img-overlay text-shadow">
               <h4 class="card-title">
                 <i class="fa-solid fa-guitar"></i>
                 <br>Evenementen
@@ -66,8 +68,8 @@
         </div>
         <div class="col-lg">
           <div class="card h-100">
-            <!-- <img src="..." class="card-img-top" alt="..."> -->
-            <div class="card-body">
+            <img src="https://pixabay.com/get/gd22f5a1fcb8a597f5184bb99cd5584e621c86cfe8ce29a292d163b26199bf7286cf2e4357edc895fb1d3d6b371e1cbecd2cd312eaf034bd02fa83c6fd52d20d1cfdef5274105c07940420ce8fc673bec_640.jpg" class="card-img" alt="...">
+            <div class="card-img-overlay text-shadow">
               <h4 class="card-title">
                 <i class="fa-solid fa-motorcycle"></i>
                 <br>Sport
@@ -80,8 +82,8 @@
         </div>
         <div class="col-lg">
           <div class="card h-100">
-            <!-- <img src="..." class="card-img-top" alt="..."> -->
-            <div class="card-body">
+            <img src="https://pixabay.com/get/g19b9260ab8d1322c979f475e0f645393b8370adfe59106a4f8cd90d5f3eef296cb0413f53e5a04b2ff20ea86a8beb23bd8225aef847b2e5c35217c0ffaada45f6c6205c9c65be9f8bb5b05629bd6eafa_640.jpg" class="card-img" alt="...">
+            <div class="card-img-overlay text-shadow">
               <h4 class="card-title">
                 <i class="fa-solid fa-champagne-glasses"></i>
                 <br>Bruiloften