From 05d7a7a3f5e2864095442a38d51f73bba7ddf6ce Mon Sep 17 00:00:00 2001
From: ShadyLane <itsashutosh.dev@gmail.com>
Date: Thu, 3 Oct 2024 19:40:47 +0530
Subject: [PATCH] Added a hover effect on images

---
 assets/css/style.css | 27 +++++++++++++++++++++++++++
 index.html           |  8 +++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 380dfd7..ee806b8 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -2050,5 +2050,32 @@ textarea.input-field {
     bottom: 80px;
     left: 0;
   }
+}
+/* Adding Hovering effect --------------------------- */
+.hover\:glaze:is(:hover, :focus-within)::after {
+  animation: glaze 1.5s ease-in-out;
+}
+.hover\:glaze {
+  overflow: hidden;
+}
+.hover\:glaze::after {
+  content: "";
+  top: 0;
+  left: 0;
+  width: 200%;
+  background-image: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%,transparent);
+  transform: translate(-100%, -100%);
+  position: absolute;
+  transition: all 0.5s ease-in-out;
+  height: 300%;
+}
 
+@keyframes glaze {
+  0% {
+    transform: translate(-100%, -100%);
+    opacity: 1;
+  }100% {
+    transform: translate(100%, 100%);
+    opacity: 0;
+  }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index e97ba51..abcbaba 100644
--- a/index.html
+++ b/index.html
@@ -988,6 +988,7 @@ <h2 class="section-title headline-1 text-center">Upcoming Event</h2>
 
             <li>
               <div class="event-card has-before ">
+                <div class="event-card has-before hover:glaze">
 
                 <div class="card-banner img-holder" style="--width: 350; --height: 450;">
                   <img src="./assets/images/event-1.jpg" width="350" height="450" loading="lazy"
@@ -1003,12 +1004,13 @@ <h3 class="card-title title-2 text-center">
                     Flavour so good you’ll try to eat with your eyes.
                   </h3>
                 </div>
-
+                </div>
               </div>
             </li>
 
             <li>
               <div class="event-card has-before ">
+                <div class="event-card has-before hover:glaze">
 
                 <div class="card-banner img-holder" style="--width: 350; --height: 450;">
                   <img src="./assets/images/event-2.jpg" width="350" height="450" loading="lazy"
@@ -1024,12 +1026,12 @@ <h3 class="card-title title-2 text-center">
                     Flavour so good you’ll try to eat with your eyes.
                   </h3>
                 </div>
-
+                </div>
               </div>
             </li>
 
             <li>
-              <div class="event-card has-before hover:shine">
+              <div class="event-card has-before hover:glaze">
 
                 <div class="card-banner img-holder" style="--width: 350; --height: 450;">
                   <img src="./assets/images/event-3.jpg" width="350" height="450" loading="lazy"