diff --git a/sccharacter.php b/sccharacter.php
index 5897c5d..9ecd544 100644
--- a/sccharacter.php
+++ b/sccharacter.php
@@ -335,6 +335,22 @@ $character_items_by_category = sccharacters_sort_items_by_category_order(
             display: flex;
             gap: 0.95rem;
             align-items: flex-start;
+            position: relative;
+            z-index: 0;
+            overflow: visible;
+        }
+
+        .card:hover,
+        .card:focus-within {
+            z-index: 2000;
+        }
+
+        .preview-container {
+            position: relative;
+            width: 68px;
+            height: 68px;
+            flex: 0 0 68px;
+            cursor: zoom-in;
         }
 
         .thumb,
@@ -346,6 +362,7 @@ $character_items_by_category = sccharacters_sort_items_by_category_order(
             flex: 0 0 68px;
             background: rgba(255,255,255,0.06);
             border: 1px solid rgba(255,255,255,0.08);
+            display: block;
         }
 
         .thumb-fallback {
@@ -356,6 +373,37 @@ $character_items_by_category = sccharacters_sort_items_by_category_order(
             font-size: 1.2rem;
         }
 
+        .preview-floating {
+            visibility: hidden;
+            opacity: 0;
+            position: absolute;
+            top: -10px;
+            left: 82px;
+            z-index: 50;
+            padding: 5px;
+            background: var(--card);
+            border: 1px solid rgba(162, 155, 120, 0.4);
+            border-radius: 12px;
+            box-shadow: 0 14px 32px rgba(0,0,0,0.45);
+            backdrop-filter: blur(12px);
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+            pointer-events: none;
+        }
+
+        .preview-floating img {
+            width: 260px;
+            height: 260px;
+            object-fit: contain;
+            display: block;
+            border-radius: 8px;
+        }
+
+        .preview-container:hover .preview-floating,
+        .preview-container:focus-within .preview-floating {
+            visibility: visible;
+            opacity: 1;
+        }
+
         .card-body { min-width: 0; }
         .card-body h3 { margin: 0 0 0.45rem; font-size: 1.05rem; }
         .stats {
@@ -490,10 +538,16 @@ $character_items_by_category = sccharacters_sort_items_by_category_order(
                                         $title = $quantity !== null ? $quantity . 'x ' . $name : $name;
                                         $note = trim((string) ($item_row['cl_sccharacteritem_note'] ?? ''));
                                         $stats = $is_custom ? ($custom_stats_by_itemcustom[(int) ($item_row['cl_sccharacteritem_scitemcustom_id'] ?? 0)] ?? []) : [];
+                                        $image_url = $uuid !== '' ? 'https://cstone.space/uifimages/' . rawurlencode($uuid) . '.png' : '';
                                     ?>
                                     <article class="card">
-                                        <?php if ($uuid !== ''): ?>
-                                            <img class="thumb" src="https://cstone.space/uifimages/<?php echo htmlspecialchars($uuid, ENT_QUOTES, 'UTF-8'); ?>.png" alt="Aperçu de <?php echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8'); ?>" loading="lazy" onerror="this.replaceWith(Object.assign(document.createElement('div'), {className:'thumb-fallback', textContent:'◈'}));">
+                                        <?php if ($image_url !== ''): ?>
+                                            <div class="preview-container">
+                                                <img class="thumb" src="<?php echo htmlspecialchars($image_url, ENT_QUOTES, 'UTF-8'); ?>" alt="Aperçu de <?php echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8'); ?>" loading="lazy" onerror="this.replaceWith(Object.assign(document.createElement('div'), {className:'thumb-fallback', textContent:'◈'}));">
+                                                <div class="preview-floating" aria-hidden="true">
+                                                    <img src="<?php echo htmlspecialchars($image_url, ENT_QUOTES, 'UTF-8'); ?>" alt="" loading="lazy" onerror="this.closest('.preview-floating').remove();">
+                                                </div>
+                                            </div>
                                         <?php else: ?>
                                             <div class="thumb-fallback">◈</div>
                                         <?php endif; ?>