valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance post card hover effects with card lift and animated details
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-22 08:28:46 +01:00
parent c6c07a1dd8
commit 3caa9a3cf2
1 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
partials/post-card.hbs
View File

@@ -1,8 +1,8 @@
<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group h-80"> <article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-xl shadow-lg overflow-hidden group h-80 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 hover:ring-2 hover:ring-[var(--brand-primary)]/50">
<a href="{{url}}" class="block h-full relative"> <a href="{{url}}" class="block h-full relative">
{{#if feature_image}} {{#if feature_image}}
<img <img
class="w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110" class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
src="{{img_url feature_image size="m"}}" src="{{img_url feature_image size="m"}}"
srcset="{{img_url feature_image size="s"}} 400w, srcset="{{img_url feature_image size="s"}} 400w,
{{img_url feature_image size="m"}} 600w, {{img_url feature_image size="m"}} 600w,
@@ -13,22 +13,27 @@
loading="lazy" loading="lazy"
> >
{{else}} {{else}}
<div class="w-full h-full flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div> <div class="w-full h-full flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl transition-colors duration-500 group-hover:bg-[var(--bg-secondary)]">No Image</div>
{{/if}} {{/if}}
{{!-- Gradient Overlay --}} {{!-- Gradient Overlay --}}
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-300"></div> <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-70 group-hover:opacity-80 transition-opacity duration-500"></div>
{{!-- Content Overlay --}} {{!-- Content Overlay --}}
<div class="absolute inset-0 p-6 flex flex-col justify-end transform transition-transform duration-300 group-hover:translate-y-[-4px]"> <div class="absolute inset-0 p-8 flex flex-col justify-end">
<div class="overflow-hidden">
{{#if primary_tag}} {{#if primary_tag}}
<span class="text-[var(--brand-primary)] text-xs uppercase tracking-widest font-bold mb-2 block"> <span class="text-[var(--brand-primary)] text-xs uppercase tracking-[0.2em] font-bold mb-3 block transform transition-transform duration-500 translate-y-4 group-hover:translate-y-0">
{{primary_tag.name}} {{primary_tag.name}}
</span> </span>
{{/if}} {{/if}}
<h2 class="text-white text-xl md:text-2xl font-bold leading-tight line-clamp-2"> <h2 class="text-white text-xl md:text-2xl font-bold leading-tight line-clamp-2 transform transition-transform duration-500 delay-75 translate-y-2 group-hover:translate-y-0">
{{title}} {{title}}
</h2> </h2>
{{!-- Decorative line that expands on hover --}}
<div class="w-0 h-1 bg-[var(--brand-primary)] mt-4 transition-all duration-500 ease-out group-hover:w-16"></div>
</div>
</div> </div>
</a> </a>
</article> </article>