Update templates/menu.html

templates/menu.html

@@ -28,14 +28,30 @@
             margin: auto;
             display: flex;
             flex-direction: column;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
+
+        /* Hover Effect for the card */
+        .menu-card:hover {
+            transform: scale(1.05);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+
         .menu-image {
             height: 200px;
             width: 100%;
-            object-fit: fill;
+            object-fit: cover;
             border-radius: 15px 15px 0 0;
             cursor: pointer;
+            transition: transform 0.3s ease, opacity 0.3s ease;
         }
+
+        /* Hover Effect for the image */
+        .menu-card:hover .menu-image {
+            transform: scale(1.1); /* Slight zoom on hover */
+            opacity: 0.8; /* Slight transparency for the zoom effect */
+        }
+
         .card-title {
             font-size: 1.2rem;
             font-weight: bold;
@@ -98,7 +114,8 @@
                     <div class="card menu-card">
                         <!-- Image with video URL -->
                         <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" 
-                             data-video-url="{{ item.Video_Url__c }}" onerror="this.src='/static/placeholder.jpg';">
+                             data-video-url="{{ item.Video_Url__c }}" 
+                             onerror="this.src='https://via.placeholder.com/300x200.jpg?text=Image+Not+Available';">
                         <div class="card-body">
                             <h5 class="card-title">{{ item.Name }}</h5>
                             <p class="card-text">${{ item.Price__c }}</p>
@@ -155,7 +172,7 @@
         image.addEventListener('click', function () {
             const videoUrl = image.getAttribute('data-video-url');
             if (videoUrl) {
-                showVideo(videoUrl); // Open the video modal
+                showVideo(videoUrl); // Open the video modal and allow downloading
             } else {
                 alert("No video associated with this image.");
             }