From 3589760a377a53e5aca4a31c02791fe7c8b39a08 Mon Sep 17 00:00:00 2001
From: Shashwat-Trivedi <shashwatrivedi2005@gmail.com>
Date: Wed, 2 Oct 2024 12:18:07 +0530
Subject: [PATCH] hover effect for image

---
 assets/css/style.css | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/assets/css/style.css b/assets/css/style.css
index 380dfd7..efac7a5 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1236,6 +1236,38 @@ textarea.input-field {
 
 .event-card:is(:hover, :focus-within) .img-cover { transform: scale(1.05); }
 
+.event-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.event-card::after {
+  position: absolute; 
+  content: "";
+  width: 200%;
+  height: 200%;
+  background-image: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0) 50%, transparent);
+  top: 0;
+  left: 0;
+  opacity: 1;
+  transform: translate(-100%, -100%);
+}
+
+.event-card:is(:hover, :focus-within)::after {
+  animation: shine 1.2s forwards;
+}
+
+@keyframes shine {
+  0% {
+    transform: translate(-100%, -100%);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(100%, 100%);
+    opacity: 0;
+  }
+}
+
 .event .btn {
   margin-inline: auto;
   margin-block-start: 40px;