From fe61b793acf6140b32b79a922a2af7142160d767 Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Mon, 28 Oct 2024 20:45:34 +0000
Subject: Adds hover effect to featured images on resoure list page

---
 alphabetlearning/static/css/project.css                        | 10 ++++++++++
 .../templates/resources/resource_card_featured.html            |  4 +++-
 2 files changed, 13 insertions(+), 1 deletion(-)

(limited to 'alphabetlearning')

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index 102d9c9..7835f2e 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -152,6 +152,12 @@ nav > div > ul > li {
 
 
 .featured-img {
+    overflow: hidden;
+}
+
+
+.featured-img img {
+    transition: transform .5s ease;
     display: block;
     margin-left: auto;
     margin-right: auto;
@@ -162,6 +168,10 @@ nav > div > ul > li {
     width: 100%;
 }
 
+.featured-img:hover img {
+    transform: scale(1.2);
+}
+
 .featured-card-description {
     margin: 10px 0px;
     line-height: 1.1;
diff --git a/alphabetlearning/templates/resources/resource_card_featured.html b/alphabetlearning/templates/resources/resource_card_featured.html
index bca4f53..c248922 100644
--- a/alphabetlearning/templates/resources/resource_card_featured.html
+++ b/alphabetlearning/templates/resources/resource_card_featured.html
@@ -2,7 +2,9 @@
 {% load markdown_extras %}
 
 <div class="featured-card" style="border-color: {{ resource.main_resource_category_colour_css_class }};">
-    <img class="featured-img" src="{{ resource.thumbnail_urls|first }}" alt="{{ resource.thumbnail_filename }}">
+    <div class="featured-img">
+        <img src="{{ resource.thumbnail_urls|first }}" alt="{{ resource.thumbnail_filename }}">
+    </div>
     <div>
         <a class="card-title-link" href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a>
         <div class="card-metadata-row">
-- 
cgit v1.2.3