Add hover styling to images

vxshxk · Jun 22, 2024 · 12830dc · 12830dc
1 parent 52ccd3f
commit 12830dc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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
@@ -21,3 +21,10 @@
     max-height: 100%;
 }
 
+.hover-highlight {
+    transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
+}
+
+.hover-highlight:hover {
+    opacity: 75%;
+}