fixed UI issue with images & code refactor

views/styles/books.css

@@ -401,4 +401,44 @@
         grid-template-columns: 320px 1fr;
         gap: 2.5rem;
     }
-}
+}
+
+#pagination-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+#pagination-controls .page-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.4rem 0.8rem;
+}
+.image-entry[data-type="book"] {
+    position: relative;
+}
+
+.image-entry[data-type="book"] .book-read-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    pointer-events: none;
+
+    color: #9b5cff;
+    font-weight: 600;
+    text-shadow: 0 0 6px rgba(0,0,0,0.6);
+    opacity: 0;
+    transition: opacity .25s ease;
+}
+
+.image-entry[data-type="book"]:hover .book-read-overlay {
+    opacity: 1;
+}