[DOC] add overview diagram hover effect

Author: SimonBlanke

docs/source/_static/css/custom.css

@@ -278,6 +278,7 @@ html[data-theme="dark"] .back-to-top-sidebar a:hover {
     text-align: center;
     position: relative;
     transition: background 0.2s ease;
+    min-height: 85px;
 }
 
 .stat-item:not(:last-child)::after {
@@ -299,6 +300,53 @@ a.stat-item {
     color: inherit;
 }
 
+/* Front content (number + label) */
+.stat-front {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.stat-item:hover .stat-front {
+    opacity: 0;
+    transform: translateY(-8px);
+}
+
+/* Hover content (description) */
+.stat-hover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem;
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.25s ease, transform 0.25s ease;
+    pointer-events: none;
+}
+
+.stat-item:hover .stat-hover {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.stat-hover-text {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--hyperactive-primary);
+    line-height: 1.4;
+    text-align: center;
+}
+
+html[data-theme="dark"] .stat-hover-text {
+    color: var(--hyperactive-secondary);
+}
+
 .stat-value {
     font-size: 1.75rem;
     font-weight: 700;
@@ -334,6 +382,7 @@ html[data-theme="dark"] .stat-value {
     .stat-item {
         flex: 1 1 50%;
         padding: 1rem 0.75rem;
+        min-height: 75px;
     }
 
     .stat-item:not(:last-child)::after {
@@ -352,6 +401,10 @@ html[data-theme="dark"] .stat-value {
     .stat-value {
         font-size: 1.5rem;
     }
+
+    .stat-hover-text {
+        font-size: 0.75rem;
+    }
 }
 
 /* ============================================

docs/source/index.rst

@@ -12,20 +12,40 @@
    <!-- Stats are auto-counted in conf.py: n_algorithms, n_backends, n_integrations -->
    <div class="stats-strip">
       <a href="user_guide/optimizers/index.html" class="stat-item">
-         <div class="stat-value" id="stat-algorithms">31</div>
-         <div class="stat-label">Algorithms</div>
+         <div class="stat-front">
+            <div class="stat-value" id="stat-algorithms">31</div>
+            <div class="stat-label">Algorithms</div>
+         </div>
+         <div class="stat-hover">
+            <div class="stat-hover-text">Bayesian · Particle Swarm · Genetic · Simulated Annealing ...</div>
+         </div>
       </a>
       <a href="user_guide/optimizers/index.html" class="stat-item">
-         <div class="stat-value" id="stat-backends">3</div>
-         <div class="stat-label">Backends</div>
+         <div class="stat-front">
+            <div class="stat-value" id="stat-backends">3</div>
+            <div class="stat-label">Backends</div>
+         </div>
+         <div class="stat-hover">
+            <div class="stat-hover-text">GFO · Optuna · sklearn</div>
+         </div>
       </a>
       <a href="user_guide/integrations.html" class="stat-item">
-         <div class="stat-value" id="stat-integrations">5</div>
-         <div class="stat-label">Integrations</div>
+         <div class="stat-front">
+            <div class="stat-value" id="stat-integrations">5</div>
+            <div class="stat-label">Integrations</div>
+         </div>
+         <div class="stat-hover">
+            <div class="stat-hover-text">sklearn · sktime · skpro · PyTorch</div>
+         </div>
       </a>
       <a href="user_guide/experiments.html" class="stat-item">
-         <div class="stat-value">One</div>
-         <div class="stat-label">Unified API</div>
+         <div class="stat-front">
+            <div class="stat-value">One</div>
+            <div class="stat-label">Unified API</div>
+         </div>
+         <div class="stat-hover">
+            <div class="stat-hover-text">Same interface for all algorithms</div>
+         </div>
       </a>
    </div>