Improved the images alignment in the cards (#87)

Author: deepeshahlawat

assets/pastevents/pastevents.css

@@ -34,11 +34,14 @@ body.dark-mode .past-event-date,
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
     margin-bottom: 2rem;
     border: 2px solid #c3c6ce;
-    transition: 0.5s ease-out;
     position: relative;
+    transition: all 0.5s ease;
+}
+
+.past-event-card:not(:hover) {
+    transition: all 0.1s ease;
 }
 
 .past-event-card a {
@@ -50,15 +53,19 @@ body.dark-mode .past-event-date,
     transform: translateY(-5px);
     box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
     border-color: var(--primary-color);
-    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
+}
+
+.past-event-card:hover .blurred-image {
+    opacity: 0.6;
+    filter: blur(10px);
 }
 
 .past-event-image {
     position: relative;
     padding: 1rem;
     width: 100%;
     height: 250px;
-    object-fit: cover;
+    object-fit: scale-down;
     border-radius: 10px;
 }
 
@@ -97,7 +104,6 @@ body.dark-mode .past-event-date,
     left: 30%;
     bottom: 0;
     text-decoration: none;
-    text-decoration: none;
     transition: background-color 0.3s ease;
 }
 

script.js

@@ -65,6 +65,9 @@ function createEventCard(event, isPastEvent = false) {
 
     return `
         <div class="${isPastEvent ? 'past-event-card' : 'event-card'}">
+            <div class="event-background">
+                <img src="${event.image}" alt="Background" class="blurred-image">
+            </div>
             <a href="${event.website || '#'}" target="_blank" rel="noopener noreferrer" class="${isPastEvent ? 'past-card-link' : 'card-link'}">
                 <img src="${event.image}" alt="${event.title}" class="${isPastEvent ? 'past-event-image' : 'event-image'}">
                 <div class="${isPastEvent ? 'past-event-details' : 'event-details'}">

style.css

@@ -540,18 +540,51 @@ body.dark-mode footer {
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
+    transition: all 0.5s ease;
     margin-bottom: 2rem;
     border: 2px solid #c3c6ce;
-    transition: 0.5s ease-out;
     position: relative;
 }
 
+.event-card:not(:hover) {
+    transition: all 0.1s ease;
+}
+
+.event-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+    display: block;
+}
+
+/* Blurred background image */
+.blurred-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: blur(15px);
+    transform: scale(1.2);
+    opacity: 0.4;
+    transition: opacity 0.3s ease, filter 0.3s ease;
+}
+
+.blurred-image:not(:hover) {
+    transition: opacity 0.1s ease, filter 0.1s ease;
+}
+
 .event-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
     border-color: var(--primary-color);
-    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
+}
+
+.event-card:hover .blurred-image {
+    opacity: 0.6;
+    filter: blur(10px);
 }
 
 .event-image {
@@ -910,10 +943,10 @@ footer {
 
 .send-message textarea {
     resize: vertical;
-    height: 50px; 
-    min-height: 50px; 
+    height: 50px;
+    min-height: 50px;
     max-height: 100px;
-    overflow-y: auto; 
+    overflow-y: auto;
     color: black;
 }
 
@@ -1189,7 +1222,6 @@ footer {
 @media (max-width: 380px) {
     .event-grid {
         display: block;
-        
     }
 
     .event-card {