diff options
| author | Matthew Lemon <y@yulqen.org> | 2024-10-28 20:45:34 +0000 |
|---|---|---|
| committer | Matthew Lemon <y@yulqen.org> | 2024-10-28 20:45:34 +0000 |
| commit | fe61b793acf6140b32b79a922a2af7142160d767 (patch) | |
| tree | 2c989948fa1c41015312ab651832b8b7533a34fc | |
| parent | b7a7acbc43bc7e574073c45c75f778404548c034 (diff) | |
Adds hover effect to featured images on resoure list page
| -rw-r--r-- | alphabetlearning/static/css/project.css | 10 | ||||
| -rw-r--r-- | alphabetlearning/templates/resources/resource_card_featured.html | 4 |
2 files changed, 13 insertions, 1 deletions
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"> |