From 12830dc1161f47110c01d869b77aa155773179e1 Mon Sep 17 00:00:00 2001
From: yukitya-1811 <adityapandia18@gmail.com>
Date: Sat, 22 Jun 2024 16:46:48 +0530
Subject: [PATCH] Add hover styling to images

---
 recipify/recipify/templates/gallery.html | 2 +-
 recipify/static/css/gallery.css          | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/recipify/recipify/templates/gallery.html b/recipify/recipify/templates/gallery.html
index 80ced54..1044696 100644
--- a/recipify/recipify/templates/gallery.html
+++ b/recipify/recipify/templates/gallery.html
@@ -99,7 +99,7 @@ <h1 class="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5x
         {% for image in images %}
         <div>
             <a href="{% url 'pick_recipe' image.id %}">
-            <img class="h-auto max-w-full rounded-lg" src="{{ image.image.url }}" alt="Gallery image" />
+            <img class="h-auto max-w-full rounded-lg hover-highlight" src="{{ image.image.url }}" alt="Gallery image" />
             </a>
         </div>
         {% endfor %}
diff --git a/recipify/static/css/gallery.css b/recipify/static/css/gallery.css
index ee5abf8..070d3f0 100644
--- a/recipify/static/css/gallery.css
+++ b/recipify/static/css/gallery.css
@@ -21,3 +21,10 @@
     max-height: 100%;
 }
 
+.hover-highlight {
+    transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
+}
+
+.hover-highlight:hover {
+    opacity: 75%;
+}