msemes/PriceHunter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add thumbnail hover preview on results table

Browse Source 
Hovering a product thumbnail shows a 192x192 enlarged preview
in a dark container with border and shadow. Appears to the right
of the thumbnail with a smooth scale+fade animation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
mariosemes
2026-03-26 22:53:22 +01:00
parent 4ec673b128
commit 84a250e955
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/src/app.css
View File

@@ -60,3 +60,13 @@
@apply block text-xs font-medium text-text-secondary mb-1.5; @apply block text-xs font-medium text-text-secondary mb-1.5;
} }
} }
/* Thumbnail hover preview */
.thumb-hover .thumb-preview {
@apply absolute left-full top-1/2 -translate-y-1/2 ml-3 z-50
opacity-0 scale-90 transition-all duration-150 ease-out;
}
.thumb-hover:hover .thumb-preview {
@apply opacity-100 scale-100;
}

11
src/client/src/routes/results/+page.svelte
View File

@@ -310,8 +310,15 @@
<tr class="border-b border-surface-border hover:bg-surface-hover/50 transition-colors duration-100 group"> <tr class="border-b border-surface-border hover:bg-surface-hover/50 transition-colors duration-100 group">
<td class="px-6 py-2"> <td class="px-6 py-2">
{#if product.image} {#if product.image}
<div class="w-8 h-8 rounded bg-surface flex items-center justify-center overflow-hidden"> <div class="relative thumb-hover">
<img src={product.image} alt="" class="max-w-full max-h-full object-contain" /> <div class="w-8 h-8 rounded bg-surface flex items-center justify-center overflow-hidden cursor-pointer">
<img src={product.image} alt="" class="max-w-full max-h-full object-contain" />
</div>
<div class="thumb-preview pointer-events-none">
<div class="w-48 h-48 rounded-lg bg-surface-raised border border-surface-border shadow-2xl shadow-black/50 p-3 flex items-center justify-center">
<img src={product.image} alt={product.name} class="max-w-full max-h-full object-contain" />
</div>
</div>
</div> </div>
{:else} {:else}
<div class="w-8 h-8 rounded bg-surface flex items-center justify-center"> <div class="w-8 h-8 rounded bg-surface flex items-center justify-center">